How to overcome loading chunk failed with Angular

Question

If I make changes to my angular app the chunk names will change on build and the old version will be remove from the dist folder. Once deployed if a user is currently on the site and then navigated to another part of the site I get a loading chunk failed error as the old file is no longer there.

My app is built using angular cli so it's packaged using webpack.

Is there anyway this can be overcome.

Answer 1

Use Pre-Loading. You get the benefits of lazy loading, without the hassle it causes in situations like this. All of the chunks will be given to the user as fast as possible without slowing down the initial load time. Below is an excerpt from https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb to explain how it works (see the article for diagrams):

First, we load the initial bundle, which contains only the components we have to have to bootstrap our application. So it is as fast as it can be.

Then, we bootstrap the application using this small bundle.

At this point the application is running, so the user can start interacting with it. While she is doing it, we, in the background, preload other modules.

Finally, when she clicks on a link going to a lazy-loadable module, the navigation is instant.

We got the best of both worlds: the initial load time is as small as it can be, and subsequent navigations are instant.