Angular - Load Production chunk files failed after deploy

Question

I have clients that have the browser open all day so after I make a deployment they see the application broken and they need to reload the page to fix it.

The server failed to load a chunk file because of the NO-CACHE hash added by @angular/cli production build.

Error: error: Uncaught (in promise): Error: Loading chunk 11 failed.

I want to reload the page after a deployment.

These are my tools:

• I have access to my NGINX configuration.
• I have access to Jenkins (Blue Ocean)
• I have implemented HttpClient Interceptors in the project.

Answer 1

I managed the error of the route replacing its error handler and reloading if it found an error loading the chunk.

// Keep the original error handler
const oldHandler = this.router.errorHandler;
// Replace route error handler
this.router.errorHandler =  (err: any) => {
  // Check if there is an error loading the chunk
  if (err.originalStack && err.originalStack.indexOf('Error: Loading chunk') >= 0) {
    // Check if is the first time the error happend
    if (localStorage.getItem('lastChunkError') !== err.originalStack) {
      // Save the last error to avoid an infinite reload loop if the chunk really does not exists after reload
      localStorage.setItem('lastChunkError', err.originalStack);
      location.reload(true);
    } else {
      // The chunk really does not exists after reload
      console.error('We really don\'t find the chunk...');
    }
  }
  // Run original handler
  oldHandler(err);
};

I hope it helps you

Answer 2

I solved this issue moving my application to AWS and saving the files in S3!