Django 无法加载角度块

Question

我正在尝试集成 django 和 angular4，但在控制台中我得到了

错误：加载块 1 失败。

我知道问题出在哪里，但我无法解决。

这是我的 app.routing.ts

import { Routes } from '@angular/router';

import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
export const AppRoutes: Routes = [{
  path: '',
  component: AdminLayoutComponent,
  children: [{
    path: '',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  }, {
    path: 'email',
    loadChildren: './email/email.module#EmailModule'
  }, {
    path: 'components',
    loadChildren: './components/components.module#ComponentsModule'
  }]
}, {
  path: '',
  component: AuthLayoutComponent,
  children: [{
    path: 'authentication',
    loadChildren: './authentication/authentication.module#AuthenticationModule'
  }, {
    path: 'error',
    loadChildren: './error/error.module#ErrorModule'
  }, {
    path: 'landing',
    loadChildren: './landing/landing.module#LandingModule'
  }]
}, {
  path: '**',
  redirectTo: 'error/404'
}];

它可以在没有子节点的情况下工作，但延迟加载块不会在 django 中加载。 任何帮助将不胜感激。

Answer 1

通过设置 deploy url 可以解决延迟加载导致的加载块失败问题。在正确位置查找模块文件会产生角度

我很长时间以来一直面临这个问题。问题是我们使用 django 中的静态文件功能从 s3 存储桶中为 django 中的 js 和其他资产提供服务

为 Angular 项目提供服务的步骤

1. 制作 Angular 构建并将其放在 django 静态文件夹中
2. 将 index.html 移至模板文件夹
3. 使用django服务index.html，根据django修改所有静态文件链接

完成此操作后，您的项目开始工作。但是此时延迟加载的模块将无法正常工作

修复延迟加载

延迟加载的文件是由 Angular 内部加载的，因为我们知道 base url 是 '/'，所以 Angular 会尝试从 127.0.0.1:8000/lazy-module.ts 加载文件。但是不存在这样的文件，因为它使用静态文件提供服务

让我们看看 js 文件的 url，它类似于 127.0.0.1:8000/static/angular_project_build_folder/lazy-module.ts

所以我们必须告诉 Angular 在哪里寻找模块文件，为此我们可以设置如下部署 url

angular.json

architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "deployUrl": "/static/angular_project_build_folder/",  
              ---- Other Configuration ----

设置多个部署网址

如果您的静态文件来自 amazon s3，那么您可以根据构建配置设置多个部署 URL。以下是生产示例

angular.json

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "deployUrl": "your amazon s3 url/static/angular_project_build_folder/",