Angular 2 Error: Loading chunk failed many times

Question

I have angular 2 application deployed on server which is working fine. Also I am logging errors of angular application so that I can solve them and make my application more stable.

I am keep getting Loading chunk failed error.

Error: Uncaught (in promise): Error: Loading chunk 9 failed.
(error: https://prjectcdn/9.d91e531959b3f1aa8ff2.js)
Error: Loading chunk 9 failed.
(error: https://prjectcdn/9.d91e531959b3f1aa8ff2.js)
    at HTMLScriptElement.u (https://prjectcdn/runtime.94ca0c35f923f70cf7e7.js:1:1243)
    at HTMLScriptElement.P (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:73488)
    at t.invokeTask (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:64564)
    at Object.onInvokeTask (https://prjectcdn/main.86b90fde964f10f1e8a8.js:1:756933)
    at t.invokeTask (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:64485)
    at n.runTask (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:59748)
    at n.invokeTask [as invoke] (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:65654)
    at m (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:76575)
    at HTMLScriptElement.b (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:76805)
    at HTMLScriptElement.u (webpack:///webpack/bootstrap:133:0)
    at apply (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1188:38)
    at apply (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:421:30)
    at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/@angular/core/fesm5/core.js.pre-build-optimizer.js:17290:32)
    at onInvokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:420:35)
    at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:188:46)
    at runTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:496:33)
    at invoke (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1540:13)
    at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1566:16)
    at z (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:814:30)
    at resolvePromise (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:771:16)
    at webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:873:16
    at apply (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:421:30)
    at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/@angular/core/fesm5/core.js.pre-build-optimizer.js:17290:32)
    at onInvokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:420:35)
    at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:188:46)
    at runTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:595:34)
    at drainMicroTaskQueue (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:500:20)
    at invoke (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1540:13)

I keep old chunks also in CDN always but still getting this error a lot. What should be the root cause of this problem and how I can overcome this?

I am not able to reproduce this error.

Answer 1

Error: Uncaught (in promise): Error: Loading chunk 9 failed.

---

As described in details by this article

• Angular lazy loading feature is a design pattern that loads NgModules as needed, which splits build file into many chunks and load on demand to speed up page.

• By default browser cached the HTML and CSS/JS chunks on initial load to speed up app by loading from cache instead of making network call.

---

Expect reason of Loading chunk error

• if you already opened app in browser, and new build deploy made when you tries to navigate route loading chunk failed issue occurs, because browser is using already cached chunks instead of newly deployed.

---

Workaround to fix this issue.

1. Hard refresh (control + shift + R) page after new build deploy to load new chunks everything works fine, all we need to either show a popup message to user and ask him to reload page

2. Programmatically force app to reload if chunks failed error occurs using global error handler

---

import { ErrorHandler } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  handleError(error: any): void {
   const chunkFailedMessage = /Loading chunk [\d]+ failed/;

    if (chunkFailedMessage.test(err.message)) {
      window.location.reload();
    }
// other stuff for error handling.
  }
}

• Provide it in our root module to change default behavior in our app, so instead of using default ErrorHandler class we are using our custom GlobalErrorHandler class.

---

@NgModule({   
  providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}]
})