5

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

Fabrizio P
  • 241
  • 3
  • 13
  • I think you might need to implement an Angular ServiceWorker which can detect that a new version of the app has been deployed to the server, and then you can prompt the user to update to the new version. – rmcsharry Mar 14 '18 at 11:00
  • What do you mean with "you can prompt the user to update to the new version"? It should be transparent to the user – Fabrizio P Mar 15 '18 at 08:40
  • What if the user is in the middle of editing some data, and you 'transparently' push the new version, which will cause the browser to reload the app and the user lose their edits? Not a great user experience, hence why you prompt or show a notification. Just like when you get a notification for any app update on your phone. You notify the user and let them choose when they want to update to the new version. Don't force it on them. – rmcsharry Mar 15 '18 at 09:45
  • This isn't my case, my app is a web app running only on desktop. Once a user open the app if I update the version on app-server the user use the old app until refresh the browser. – Fabrizio P Mar 15 '18 at 12:55
  • The user uses the old app until they refresh. What if they don't refresh for several days, just leave their PC on with the app open. I do that all the time. You need to push a notification to them that there is a new version. And you STILL have the problem that if you push that new version automatically refreshing the browser as a result that you might do that whilst they are in the middle of typing an edit. – rmcsharry Mar 15 '18 at 14:16
  • I have a session timeout to 1hr, so I force to refresh the page on session timeout or logout. Anyway I don't think this is the real problem, when the user refresh the page I could have the same issue, caching some chunk or not? – Fabrizio P Mar 16 '18 at 08:25
  • It could be that the bundle is too large and the request is timing out - that is one cause of this error. If you have lazy loaded modules, you might not have everything configured properly, which can also cause this error creating chunks. See: https://github.com/angular/angular-cli/issues/5204 – rmcsharry Mar 16 '18 at 12:40
  • Mmmm so strange for me, I have many lazy loaded modules.. – Fabrizio P Mar 16 '18 at 16:03

3 Answers3

0

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.

Fabrizio P
  • 241
  • 3
  • 13
0

There is a good description that explains the problem

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

Alex Burtsev
  • 12,418
  • 8
  • 60
  • 87
0

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

Edward Lu
  • 11
  • 1
  • 1