10

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.

Manwal
  • 23,450
  • 12
  • 63
  • 93
  • I have same `Loading chunk failed` error, Expect that happens when keep browser tab opened for long time and make redirect action => this error thrown, Did you found any workaround for this error? – Khaled Lela Sep 29 '19 at 16:42

1 Answers1

20

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}]
})
Khaled Lela
  • 7,831
  • 6
  • 45
  • 73
  • 2
    The programmatic solution also hides any other errors that might happen, though. I fixed this by changing `implements` to `extends` and adding `else { super.handleError(error) }` to the if statement. – John Montgomery Nov 04 '19 at 22:56
  • @JohnMontgomery for sure after chunk check you have to do other stuff for error handling, updated my answer, feel free to upvote my answer if you see it can help others. – Khaled Lela Nov 05 '19 at 06:28
  • 1
    Is this solution safe? Loading chunk failed error will always disappear after page reload? Otherwise we will enter infinite loop. Also look like this solution does not support different languages – Marek Nov 24 '20 at 11:22
  • @Marek Hard reload will fix the issue by load new chunk generated after deployments, As particular solution that we already implement on one of our project => Is to listen frontend app version and with new version deployed dialog appear to notify user with new version with reload button, Hope this help you! – Khaled Lela Nov 24 '20 at 18:02
  • 1
    But this solution will not always work I think. First of all, window.location.reload() will probably not work as hard reload in all browsers, second, I have seen errors captured by i.e Airbrake, that were in language different than English (user had different browser language). Then this error will not be captured. – Marek Nov 25 '20 at 20:26
  • 1
    This is like a handy solution but I like to do any other recommended approach for this issue. I using SW in my angular project and I tried SwUpdate [link](https://v9.angular.io/api/service-worker/SwUpdate), still no luck to resolve the issue – Yaseer Jan 13 '22 at 06:58