Chunk (cached) load error with angular 4

Question

I have an angular 4 app with some lazy loading routes. The webapp is deployed on a wildfly server. Often when I update the package and try to use the app I get this

7.67f0bdb1c002c6632088.chunk.js Failed to load resource: the server responded with a status of 404 (Not Found) vendor.bb65efd8883ae143b006.bundle.js:1 ERROR Error: Uncaught (in promise): Error: Loading chunk 7 failed. Error: Loading chunk 7 failed. at HTMLScriptElement.n (inline.c073b632003c3be717dd.bundle.js:1) at HTMLScriptElement.o (polyfills.3d0670849efe6dd6a541.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at Object.onInvokeTask (vendor.bb65efd8883ae143b006.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at r.runTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at e.invokeTask [as invoke] (polyfills.3d0670849efe6dd6a541.bundle.js:1) at W (polyfills.3d0670849efe6dd6a541.bundle.js:1) at HTMLScriptElement.q (polyfills.3d0670849efe6dd6a541.bundle.js:1) at HTMLScriptElement.n (inline.c073b632003c3be717dd.bundle.js:1) at HTMLScriptElement.o (polyfills.3d0670849efe6dd6a541.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at Object.onInvokeTask (vendor.bb65efd8883ae143b006.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at r.runTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at e.invokeTask [as invoke] (polyfills.3d0670849efe6dd6a541.bundle.js:1) at W (polyfills.3d0670849efe6dd6a541.bundle.js:1) at HTMLScriptElement.q (polyfills.3d0670849efe6dd6a541.bundle.js:1) at u (polyfills.3d0670849efe6dd6a541.bundle.js:1) at u (polyfills.3d0670849efe6dd6a541.bundle.js:1) at polyfills.3d0670849efe6dd6a541.bundle.js:1 at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at Object.onInvokeTask (vendor.bb65efd8883ae143b006.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at r.runTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at o (polyfills.3d0670849efe6dd6a541.bundle.js:1) at e.invokeTask [as invoke] (polyfills.3d0670849efe6dd6a541.bundle.js:1) at W (polyfills.3d0670849efe6dd6a541.bundle.js:1) w @ vendor.bb65efd8883ae143b006.bundle.js:1 7.67f0bdb1c002c6632088.chunk.js Failed to load resource: the server responded with a status of 404 (Not Found) vendor.bb65efd8883ae143b006.bundle.js:1 ERROR Error: Uncaught (in promise): Error: Loading chunk 7 failed. Error: Loading chunk 7 failed. at HTMLScriptElement.n (inline.c073b632003c3be717dd.bundle.js:1) at HTMLScriptElement.o (polyfills.3d0670849efe6dd6a541.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at Object.onInvokeTask (vendor.bb65efd8883ae143b006.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at r.runTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at e.invokeTask [as invoke] (polyfills.3d0670849efe6dd6a541.bundle.js:1) at W (polyfills.3d0670849efe6dd6a541.bundle.js:1) at HTMLScriptElement.q (polyfills.3d0670849efe6dd6a541.bundle.js:1) at HTMLScriptElement.n (inline.c073b632003c3be717dd.bundle.js:1) at HTMLScriptElement.o (polyfills.3d0670849efe6dd6a541.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at Object.onInvokeTask (vendor.bb65efd8883ae143b006.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at r.runTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at e.invokeTask [as invoke] (polyfills.3d0670849efe6dd6a541.bundle.js:1) at W (polyfills.3d0670849efe6dd6a541.bundle.js:1) at HTMLScriptElement.q (polyfills.3d0670849efe6dd6a541.bundle.js:1) at u (polyfills.3d0670849efe6dd6a541.bundle.js:1) at u (polyfills.3d0670849efe6dd6a541.bundle.js:1) at polyfills.3d0670849efe6dd6a541.bundle.js:1 at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at Object.onInvokeTask (vendor.bb65efd8883ae143b006.bundle.js:1) at t.invokeTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at r.runTask (polyfills.3d0670849efe6dd6a541.bundle.js:1) at o (polyfills.3d0670849efe6dd6a541.bundle.js:1) at e.invokeTask [as invoke] (polyfills.3d0670849efe6dd6a541.bundle.js:1) at W (polyfills.3d0670849efe6dd6a541.bundle.js:1) w @ vendor.bb65efd8883ae143b006.bundle.js:1

I'm sure that is a browser cache issue because if I press ctrl+shift+F5 the app works fine.

So can I invalidate the cache browser? Or add a version/timestamp to the file name?

Thanks a lot F

Answer 1

There is a good description that explains the problem

https://medium.com/@kamrankhatti/angular-lazy-routes-loading-chunk-failed-42b16c22a377

Answer 2

I resolved the issue by just downgrading the from the current version. you can see more on Angular 5 with Angular cli non-lazy loading modules in the router

Answer 3

I try to explain better my issue to get this error.. I have the ng app running on Wildfly and is builded in a war file.

1. Deploy war app with version 1.5
2. Go to app and use it...
3. Deploy version 1.6
4. Without closing the browser I simply refresh page and I get the error
5. Refresh the page with CTRL+SHIFT+R and the app works

I'm almost sure that the problem is the browser cache.. and I don't have any idea about a workaround to fix it.