Our Angular 13 app build looks like this
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.e9020ce07f592565.js | main | 4.64 MB | 871.82 kB
scripts.8911c8ad722f703e.js | scripts | 1.76 MB | 312.90 kB
styles.4b97743238f04d3d.css | styles | 1.59 MB | 121.34 kB
polyfills.cec511fd364d9ea0.js | polyfills | 45.83 kB | 14.07 kB
runtime.5faefac7dc08629c.js | runtime | 3.11 kB | 1.48 kB
| Initial Total | 8.03 MB | 1.29 MB
Lazy Chunk Files | Names | Raw Size | Estimated Transfer Size
860.897795886385aedd.js | app-survey-builder-survey-builder-module | 912.08 kB | 155.87 kB
441.3bc0daed70212bb9.js | app-preview-preview-module | 221.65 kB | 34.26 kB
614.0f8a7abba4c09af0.js | app-surveys-surveys-module | 195.01 kB | 21.68 kB
974.6757fbdf053a46db.js | app-question-quotas-question-quotas-module | 149.63 kB | 16.94 kB
134.3183a5d12401e0a4.js | app-survey-flow-survey-flow-module | 133.59 kB | 17.62 kB
322.8e07a2632ba67a0d.js | app-surveys-surveys-module | 35.45 kB | 6.64 kB
267.250ef0382cdbcdf0.js | admin-admin-module | 24.76 kB | 3.65 kB
149.67414a9706487ddb.js | app-surveys-surveys-module | 15.89 kB | 3.78 kB
common.d5570172074b0de4.js | common | 10.86 kB | 3.04 kB
54.f09eeab4ce416ec4.js | app-pages-pages-module | 3.69 kB | 1.12 kB
93.cd48b909ea029bcc.js | app-auth-auth-module | 3.69 kB | 1.10 kB
600.e05e1a8fc5362ec7.js | app-copy-survey-copy-survey-module | 1.11 kB | 493 bytes
Some users of our live site report that Angular application is not loading for them. At that moment we used Angular 12. By logs working users log looked like this
[08/Apr/2022:09:43:40 -0500] "GET /runtime-es2015.fada431d209ef0af5211.js HTTP/1.1" 200 1800
[08/Apr/2022:09:43:40 -0500] "GET /polyfills-es2015.178050c3e4c4734e9c3a.js HTTP/1.1" 200 15178
[08/Apr/2022:09:43:40 -0500] "GET /assets/app.css HTTP/1.1" 200 19490
[08/Apr/2022:09:43:40 -0500] "GET /scripts.c4c1935f41c123554d47.js HTTP/1.1" 200 527957
[08/Apr/2022:09:43:40 -0500] "GET /styles.5c1973c0171bd0454e6e.css HTTP/1.1" 200 155853
[08/Apr/2022:09:43:40 -0500] "GET /main-es2015.59e602dd891218ebe5f4.js HTTP/1.1" 200 1285145
[08/Apr/2022:09:43:43 -0500] "GET /common-es2015.14aba35c435410594f25.js HTTP/1.1" 200 2366
[08/Apr/2022:09:43:43 -0500] "GET /933-es2015.49d8c0136dce9c55b461.js HTTP/1.1" 200 4943
[08/Apr/2022:09:43:43 -0500] "GET /746-es2015.bb01286bb949e2a99f07.js HTTP/1.1" 200 39238
BACKEND REQUESTS GOES HERE
For not working users log looked like this
[16/Apr/2022:23:25:46 -0500] "GET /runtime-es2015.ad22f5c5b13520089e9a.js HTTP/1.1" 200 1800
[16/Apr/2022:23:25:46 -0500] "GET /polyfills-es2015.178050c3e4c4734e9c3a.js HTTP/1.1" 200 15178
[16/Apr/2022:23:25:46 -0500] "GET /assets/app.css HTTP/1.1" 200 19490
[16/Apr/2022:23:25:46 -0500] "GET /styles.5c1973c0171bd0454e6e.css HTTP/1.1" 200 155853
[16/Apr/2022:23:25:47 -0500] "GET /Roboto-Regular.c065bd9fa03a7a797d95.woff2 HTTP/1.1" 200 64184
[16/Apr/2022:23:25:46 -0500] "GET /scripts.c4c1935f41c123554d47.js HTTP/1.1" 200 527957
[16/Apr/2022:23:25:46 -0500] "GET /main-es2015.59e602dd891218ebe5f4.js HTTP/1.1" 200 1285145
[16/Apr/2022:23:25:48 -0500] "GET /favicon.ico HTTP/1.1" 200 1399
As you can see Lazy Chunk Files have not been loaded for not working users. Later I have updated Angular 12 to 13 but the issue still persists. For working users it looks something like this
[20/Apr/2022:05:34:38 -0500] "GET /runtime.4f4cdb3c4054bd5b.js HTTP/1.1" 200 1738
[20/Apr/2022:05:34:38 -0500] "GET /polyfills.69181121524d0151.js HTTP/1.1" 200 16050
[20/Apr/2022:05:34:38 -0500] "GET /assets/app.css HTTP/1.1" 200 19490
[20/Apr/2022:05:34:38 -0500] "GET /scripts.8911c8ad722f703e.js HTTP/1.1" 200 531940
[20/Apr/2022:05:34:38 -0500] "GET /main.620c4dee845acb2b.js HTTP/1.1" 200 1284787
[20/Apr/2022:05:34:38 -0500] "GET /styles.7701d10144e529f4.css HTTP/1.1" 200 223225
[20/Apr/2022:05:34:40 -0500] "GET /149.84acb6ebf31a2198.js HTTP/1.1" 200 4594
[20/Apr/2022:05:34:40 -0500] "GET /common.593e8c4873f75c19.js HTTP/1.1" 200 2469
[20/Apr/2022:05:34:40 -0500] "GET /561.68730aa026441aa9.js HTTP/1.1" 200 43264
BACKEND REQUESTS GOES HERE
and for not working users it looks like this
[21/Apr/2022:05:55:51 -0500] "GET /runtime.4f4cdb3c4054bd5b.js HTTP/1.1" 200 1738
[21/Apr/2022:05:55:51 -0500] "GET /polyfills.69181121524d0151.js HTTP/1.1" 200 16050
[21/Apr/2022:05:55:51 -0500] "GET /Roboto-Regular.e64b7e5db276537f.woff2 HTTP/1.1" 200 64184
[21/Apr/2022:05:55:51 -0500] "GET /assets/app.css HTTP/1.1" 200 19490
[21/Apr/2022:05:55:51 -0500] "GET /styles.7701d10144e529f4.css HTTP/1.1" 200 223225
[21/Apr/2022:05:55:51 -0500] "GET /scripts.8911c8ad722f703e.js HTTP/1.1" 200 531940
[21/Apr/2022:05:55:51 -0500] "GET /main.620c4dee845acb2b.js HTTP/1.1" 200 1284787
As you can see event after project update this three files are not loading.
[20/Apr/2022:05:34:40 -0500] "GET /149.84acb6ebf31a2198.js HTTP/1.1" 200 4594
[20/Apr/2022:05:34:40 -0500] "GET /common.593e8c4873f75c19.js HTTP/1.1" 200 2469
[20/Apr/2022:05:34:40 -0500] "GET /561.68730aa026441aa9.js HTTP/1.1" 200 43264
The project angular.json looks like this.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"project-name": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/app/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
"src/.htaccess"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/ionicons/dist/collection/components/icon/icon.css",
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/nebular-icons/scss/nebular-icons.scss",
"src/app/@theme/styles/styles.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/@fortawesome/fontawesome-free/css/solid.css",
"src/styles.css",
"node_modules/froala-editor/css/froala_editor.pkgd.min.css",
"node_modules/froala-editor/css/froala_style.min.css",
"node_modules/@ng-select/ng-select/themes/default.theme.css",
"node_modules/ngx-ui-switch/ui-switch.component.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/froala-editor/js/froala_editor.pkgd.min.js",
"node_modules/froala-editor/js/plugins.pkgd.min.js"
]
},
"configurations": {
"staging": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "100kb"
}
],
"optimization": true,
"outputHashing": "all",
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
},
"dev": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "100kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
},
"qa": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "100kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
]
},
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "100kb"
}
],
"optimization": true,
"outputHashing": "all",
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project-name:build"
},
"configurations": {
"staging": {
"browserTarget": "project-name:build:staging"
},
"dev": {
"browserTarget": "project-name:build:dev"
},
"qa": {
"browserTarget": "project-name:build:qa"
},
"production": {
"browserTarget": "project-name:build:production"
},
"development": {
"browserTarget": "project-name:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "project-name:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/froala-editor/js/froala_editor.pkgd.min.js",
"node_modules/froala-editor/js/plugins.pkgd.min.js"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/ionicons/dist/collection/components/icon/icon.css",
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/nebular-icons/scss/nebular-icons.scss",
"src/app/@theme/styles/styles.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/@fortawesome/fontawesome-free/css/solid.css",
"src/styles.css",
"node_modules/froala-editor/css/froala_editor.pkgd.min.css",
"node_modules/froala-editor/css/froala_style.min.css",
"node_modules/@ng-select/ng-select/themes/default.theme.css",
"node_modules/ngx-ui-switch/ui-switch.component.css"
],
"assets": [
"src/assets",
"src/favicon.ico",
"src/.htaccess"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"project-name-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "project-name:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "project-name"
}
I have seen that one of failed clients use Opera on Windows. I have installed Opera on my windows and it just worked fine on it. Is it possible that there can restrictions on some browsers to prevent Lazy Chunk Files load or so? Please let me know if you need more details.