在 Angular 7 PROD 应用程序中验证延迟加载

Question

I want to verify lazy loading in Angular 7. While on local server, I used https://augury.rangle.io/ browser plugin to verify the lazy loading. Also, verified that the lazy loaded module gets downloaded when I hit the intended router path in address bar.

However, as I deployed the application to prod (ng build --prod), I can't see the lazy-loaded-module.js being downloaded.

Did I make any mistake ? How do I verify it is working correctly ? Should the **module.js download on PROD as well as like on local server ?

PFB screenshot of my dev tools on localhost.

Added my production config.

"configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            },
            {
              "replace": "src/index.html",
              "with": "src/index.prod.html"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ]
        }
      }

Answer 1

请检查dist中加载模块js文件的路由，检查dist文件夹中runtime.js中js加载模块文件的地址，因为localhost中的加载地址与主机上发布的项目不同。