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

Improve this question
8
  • 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. Commented Mar 14, 2018 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 Commented Mar 15, 2018 at 8: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. Commented Mar 15, 2018 at 9: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. Commented Mar 15, 2018 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. Commented Mar 15, 2018 at 14:16

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

There is a good description that explains the problem

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

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.