[Answered ]-Django is unable to load angular chunks

by

2👍

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 from s3 bucket using static files feature in django

Steps to serve angular project

  1. Make angular build and place it inside django static files folder
  2. Move index.html to templates folder
  3. 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/",
👤Nishant Singh

Leave a comment