Django无法加载角度块 [英] Django is unable to load angular chunks

问题描述

我正在尝试将django和angular4集成在一起，但是在控制台中却得到

I am trying to integrating django and angular4 but in the console I am getting

错误:加载块1失败.

Error: Loading chunk 1 failed.

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

I know what the problem is but I am unable to solve that.

这是我的app.routing.ts

This is my 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中加载. 任何帮助将不胜感激.

It works without children but lazy load chunks are not loading in django. Any help would be appreciated.

推荐答案

加载块失败可以通过设置 deploy url 来解决延迟加载的问题.在正确的位置查找模块文件会变得困难

Loading Chunks failed problem with lazy loading can be fixed by setting deploy url. It'll make angular to look for module files at correct location

很长一段时间以来我一直在面对这个问题.问题是我们使用Django中的静态文件功能为Django中的js和其他资产提供服务

I was facing this issue from very long time. The problem is we serve js and other assets in django using static files feature in django

为有角度的项目服务的步骤

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

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

With this done your project starts to work. But lazy loaded module will not work at this moment

修复延迟加载

延迟加载的文件是按角度在内部加载的，因为我们知道基本url为'/'，所以角度会尝试从127.0.0.1:8000/lazy-module.ts加载文件.但由于使用静态文件进行投放，因此不存在此类文件

Lazy loaded files are loaded internally by angular, as we know the base url is '/' so angular will try to load files from 127.0.0.1:8000/lazy-module.ts. But no such file exists beacause its served using static files

让我们查看js文件的网址，就像127.0.0.1:8000/static/angular_project_build_folder/lazy-module.ts

因此，我们必须告诉angular在哪里寻找模块文件，为此，我们可以按如下所示设置deploy网址

So we have to tell angular where to look for module files and for that we can set deploy url as below

angular.json

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

设置多个部署网址

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

In case your static files are coming from amazon s3 then you can set multiple deploy urls depending upon you build configuration. Below is the example for production

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/", 

这篇关于Django无法加载角度块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！