Django is unable to load angular chunks

问题

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

Error: Loading chunk 1 failed.

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

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'
}];

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

回答1:

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

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

Steps to serve angular project

Make angular build and place it inside django static files folder
Move index.html to templates folder
Serve index.html using django and modify all static file links according to django

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

FIX LAZY LOADING

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

lets look at url for js files it'll be something like 127.0.0.1:8000/static/angular_project_build_folder/lazy-module.ts

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 ----

Setting Up Multiple Deployment 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/",

来源：https://stackoverflow.com/questions/45512414/django-is-unable-to-load-angular-chunks

标签

django

angular

lazy-loading