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.

Refer this link https://github.com/angular/angular-cli/issues/5478 — hrdkisback, Feb 06 '18 at 15:18
This is another issue, my build works correctly, the issue applies only to users that do not refresh the page after a new bundle is on the server. — Eugenio Valeiras, Feb 06 '18 at 15:41
You could use websockets to trigger a page reload after a new build but that's a bit overkill — David, Feb 06 '18 at 16:26
Check this answer to the same problem: https://stackoverflow.com/a/59073053/6044269 — Luke Kroon, Nov 27 '19 at 15:05

score 4 · Answer 1 · answered Apr 12 '18 at 21:10

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

I placed it in `app.component.ts` **constructor**, but it didn't work. — Arpit Kumar, Nov 02 '18 at 11:20

score 1 · Accepted Answer · answered Jun 10 '18 at 03:59

1

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

answered Jun 10 '18 at 03:59

Eugenio Valeiras

980
1
9
30

So you're saving all the chunks into s3 so they're still there after a deploy, but won't that mean that user's will be displayed an outdated version of your application until they then refresh the page? – Benno Dec 18 '18 at 01:05
1

That's correct @Benno, my issue was that the application crashes after you deploy a new version. You can handle this situation by checking a version number from a JSON file in the S3 bucket and refresh the app if mismatch. – Eugenio Valeiras Jan 06 '19 at 03:16
@EugenioValeiras maybe you could detail a bit more your solution? with some code or something? moving the files to s3 is hardly descriptive enough – Guillaume Jun 11 '20 at 07:16

Angular - Load Production chunk files failed after deploy

2 Answers2