In Angular, the lazy loading feature is a design pattern to load the NgModules as needed, which then splits the build file into multiple chunks and loads them on-demand to speed up the PAGE load.

Using the lazy loading feature may result with you having to face a common issue “Loading chunk [number] failed” while navigating any route and here are the STEPS to fix it: This is the exact error displayed:

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

This error’s main culprit is browser caching. To SOLVE this, we need a global error handling while forcing the app to reload if any of the chunks fail to load.

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();
}
}
}

This above GlobalErrorHandler class we have created will have only one job. That is, checking all the error messages for Loading chunk [number] failed and if there is one, then Angular forces to reload the app in ORDER to load all the chunks again.