I have an angular app with ngsw enabled and I am using lazy loaded routes like:

{
    path: 'some-route',
    loadChildren: () => import('./modules/some-route.module').then(m => m.SomeRouteModule),
  },

Then I managed to get a “ChunkLoadError” in some situations when a tab wasn’t refreshed for a long time and the app got updated in the background.

I then added added a check for SwUpdate to update the service worker in the background which seems to work, but the ‘VERSION_READY’ event is only triggered once, then the service worker itself is up to date…
However the main.<somehash>.js and runtime.<somehash>.js files are not updated yet because the page has not been refreshed yet….

Then the ChunkLoadError can occur again because the js script names (for the chunks, required by the ìmport` of the lazy route) are hardcoded in runtime.js:

r.u = e=>(76 === e ? "common" : e) + "." + {
        76: "129674edb7530c86",
        104: "e66180727cee350b",
        110: "de0a8337b57a0a38",
        177: "c488a908631cc000",
        273: "e947fdddfcc8f12c",
        580: "a6c1ad117790d1f7",
        591: "76fe571200680e50",
        667: "2ad13b689c4861eb",
        669: "36f918473632e75d",
        972: "ab57559804d7b032",
        986: "08314b7943cb568c",
        993: "339276161ed68d9b"
    }[e] + ".js",
    r.miniCssF = e=>{}

If I then try to open a route which is not cached anymore by the service worker, it tries to fetch the old non existent script…

I have seen solutions to reload the whole page like here https://medium.com/fieldcircle/error-loading-chunk-xx-failed-with-angular-lazy-loaded-modules-6c5b1b6f8b8d by listening to that error in the GlobalErrorHandler…

But I was wondering if there are other approaches to fix this on a more basic level…