ChunkLoadError with lazy loaded modules (after deploy?)

Which @angular/* package(s) are the source of the bug?

core, platform-browser

Is this a regression?

No

Description

I’m not 100% sure what is the cause of this, but users have occasionally reported blank pages in our application when navigating from one page to another, where loading the new page would involve lazy loading some additional code. Some users have looked in the console, and seen that the error is a ChunkLoadError from webpack.

I’m not certain what is going on, but one possibility is that they are using the app at the time that we deploy new code. In that situation, it might be the case that the chunk of code they are trying to load is no longer present.

Working against this is that, while some code was deployed on the day the error below was reported, no changes at all were made to the angular front end that day–it would have recompiled as part of the deploy, but I’m not sure any of the filenames would have changed.

Whatever the cause of the chunk failing to load, it seems that there could be some more graceful way to handle such failures.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

This was provided by one user who ran into the error:

Q@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:472495
C/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:477327
C/</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:490070
subscribe/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:460124
C@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:488423
subscribe@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:460071
A/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:473916
C/</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:490070
subscribe/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:460124
C@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:488423
subscribe@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:460071
A/</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:480772
u/this._next<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:472615
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:464357
C/</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:475566
u/this._next<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:472615
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:464357
next/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:462417
C@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:488423
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:462319
D1/this.stateSubscription<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:976617
U/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:465244
_next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:464644
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:464357
C/</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:478976
u/this._next<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:472615
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:464357
V/</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:483972
u/this._next<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:472615
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:464357
A/</</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:478535
a/V<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:488591
_execute@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:485103
execute@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:486496
flush@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:485863
schedule@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:486417
schedule@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:485626
a@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:488571
A/</<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:478524
u/this._next<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:472615
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:464357
next/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:462417
C@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:488423
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:462319
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:459603
next@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:972628
dispatch@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:977304
onFocus@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:170735
hostBindings/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:171545
Si@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:603690
d@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:603854
V1/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:723974
invokeTask@https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1:20972
onInvokeTask@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:646982
invokeTask@https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1:20893
runTask@https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1:16326
invokeTask@https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1:22025
nt@https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1:34082
rt@https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1:34338
main.07b195b3b61d5819.js:1:472495
Loading failed for the module with source “https://cf.geekdo-static.com/frontend/6635.735c6f85184a0ab5.js”. built-war-design-build-and-destroy-ww2-tanks:1:1
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 6635 failed.
(error: https://cf.geekdo-static.com/frontend/6635.735c6f85184a0ab5.js)
a.f.j@https://cf.geekdo-static.com/frontend/runtime.17feb495922e638f.js:1:3544
a.e/<@https://cf.geekdo-static.com/frontend/runtime.17feb495922e638f.js:1:724
a.e@https://cf.geekdo-static.com/frontend/runtime.17feb495922e638f.js:1:703
loadChildren@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:113941
loadModuleFactory@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:775609
load@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:775263
getChildConfig/<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:767623
g1@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:477979
l1@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:477929
u/this._next<@https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1:472615
next@https://cf.geekdo-static.com/frontend/main.07b1…
    dt https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    dt https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    mt https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    invokeTask https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    onInvokeTask https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    invokeTask https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    runTask https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    at https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    invokeTask https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    nt https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    rt https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
main.07b195b3b61d5819.js:1:573535
    Is https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    handleError https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    next https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    U https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    _next https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    next https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    next https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    C https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    next https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    emit https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    onHandleError https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    invoke https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    run https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    runOutsideAngular https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    onHandleError https://cf.geekdo-static.com/frontend/main.07b195b3b61d5819.js:1
    handleError https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    runGuarded https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    microtaskDrainDone https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    at https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    invokeTask https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    nt https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1
    rt https://cf.geekdo-static.com/frontend/polyfills.895005c793fa245f.js:1

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.1.3
Node: 16.12.0
Package Manager: yarn 1.22.17
OS: darwin x64

Angular: 13.1.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.3
@angular-devkit/build-angular   13.1.3
@angular-devkit/core            13.1.3
@angular-devkit/schematics      13.1.3
@angular/cli                    13.1.3
@schematics/angular             13.1.3
rxjs                            7.5.2
typescript                      4.5.4

Anything else?

I saw a similar (or same) problem discussed in this Medium article: https://medium.com/fieldcircle/error-loading-chunk-xx-failed-with-angular-lazy-loaded-modules-6c5b1b6f8b8d

It seems that if the application is going to crash hard anyway when a js chunk cannot be loaded, perhaps it should reload automatically at that point, since any work is certainly lost.

Edit: I’ve just been informed that everyone who has reported this issue has been using Firefox. The error logs above are from a Firefox 78 user, but other reports have come in from Firefox 95 users.

[skcarnes]

We’re running into this same issue.

If a user is on our website during deployment and they navigate to a lazy loaded feature of the app they get a ChunkLoadError. After refreshing the page everything works fine. Like @karptonite said I’m assuming it’s because the module name has changed on the server.

Is there any way to resolve this issue? We know that we could use the preloadAllModules feature but figured that kinda defeats the purpose of lazy loading.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}