Unable to serve or build app due to runtime ChunkLoadError

[mattlewis92]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 13.0.4

Description

When starting or building our app after upgrading to angular 13 we get a ChunkLoadError in the browser console at runtime because webpack isn't emitting a the .js file for that chunk. There are no build errors in the console, and weirdly after a few incremental rebuilds the problem fixes itself. After some digging I found the root cause was this PR: #22239 If I disable the NamedChunksPlugin in the webpack config, then the problem goes away and everything works as expected.

🔬 Minimal Reproduction

Reproducing this outside of our app is hard. If you're willing to sign an NDA I can just give you access to the repo to debug it yourselves, or if you can give me some instructions on how to debug it my end to find the root cause I'm also happy to do that.

🔥 Exception or Error

ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk default-libs_comment_common_src_lib_comments_comment_module_ts-libs_task_comment-bar_src_lib_-ca5e7c failed.
(error: http://localhost:4200/default-libs_comment_common_src_lib_comments_comment_module_ts-libs_task_comment-bar_src_lib_-ca5e7c.js)
ChunkLoadError: Loading chunk default-libs_comment_common_src_lib_comments_comment_module_ts-libs_task_comment-bar_src_lib_-ca5e7c failed.
(error: http://localhost:4200/default-libs_comment_common_src_lib_comments_comment_module_ts-libs_task_comment-bar_src_lib_-ca5e7c.js)

🌍 Your Environment

Angular CLI: 13.1.3
Node: 16.13.1
Package Manager: npm 6.14.15
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.3
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cdk                    13.1.1
@angular/cli                    13.1.3
@angular/google-maps            12.2.1
@schematics/angular             13.1.3
ng-packagr                      13.1.2
rxjs                            7.4.0
typescript                      4.5.4

Anything else relevant?

[alan-agius4]

Hi @mattlewis92,

If you'd like to debug this yourself or try to create a minimal reproduction, I suggest for you to start checking what's "special" about the problematic module ie (default-libs_comment_common_src_lib_comments_comment_module_ts-libs_task_comment-bar_src_lib_).. It is strange that the issue goes away after a couple of rebuilds.

Without a reproduction it would be definitly an impossible feat to get to the bottom of this. I have asked around about signing an NDA to get access to your codebase, but I am still awaiting an answer from my line manger.

[alan-agius4]

Hi @mattlewis92,

Just wanted to keep you posted. The way forward to sign an NDA will take some time. Potential a couple of additional weeks and most certainly we'd also need to involve the legal team.

Therefore, if possible I strongly recommand that you try to isolate the problem and create a minimal reproduction that you can share through Github.

[mattlewis92]

Hi @mattlewis92,

Just wanted to keep you posted. The way forward to sign an NDA will take some time. Potential a couple of additional weeks and most certainly we'd also need to involve the legal team.

Therefore, if possible I strongly recommand that you try to isolate the problem and create a minimal reproduction that you can share through Github.

Thank you for the update, I completely understand, it's a similar slow process on our end as well 😅

I did already try to create a minimal repro and find what's weird about that chunk, but didn't have much luck, anything unusual in there is also present in other chunks as well that do load correctly. I suspect it's going to be very nuanced and will probably be a single line of code somewhere that's causing the problem. The only thing I can think of is just to keep commenting out code until it starts working and work backwards from there.

In the meantime, we've managed to workaround it by using @angular-builders/custom-webpack and disabling the NamedChunksPlugin like so:

config.plugins = config.plugins.filter((plugin) => {
  return plugin.constructor.name !== 'NamedChunksPlugin';
});

We're not using budgets for lazy chunks so we don't need this plugin to run. Maybe this helps someone else who's running into the problem 😄

[alan-agius4]

Hi @mattlewis92,

Do you mind sharing the name of the company that you work for? And by any chance, are aware if previously there was any NDA signed between your company and Google?

Surprisingly, from the looks of it, it seems that no other users are experiencing this problem. Were you able to replicate this in a minimal project by any chance?

[mattlewis92]

Sure thing, it's ClickUp. I don't think there's been any NDA signed between google and us, I did give Joost access to our repo a few weeks ago but I think he signed the NDA from himself.

Unfortunately I haven't had time to try and make a minimal reproduction yet.

[alan-agius4]

@mattlewis92, so I can sign an NDA for myself.

[mattlewis92]

@mattlewis92, so I can sign an NDA for myself.

Yep, it doesn't have to be between us and google, it can just be with you as an individual. It's just a basic hoop we need to jump through to give access to our repo. If you're ok signing it from yourself then I can get that sent across to you?

[alan-agius4]

Yes, please do. I believe you already have my email address.

[mattlewis92]

OK great! Will get our legal team to send that over asap 😄

[mattlewis92]

NDA is sent!

[alan-agius4]

Hi @mattlewis92,

The root cause of the issue is that in your project you are using the webpackChunkName magic comments. In this case a fix for this is pretty straight forward especially since it breaks the runtime. But, in general there are some things to take note of:

• Webpack specific features are not supported by the Angular CLI team and any of these features can stop working without warning in any patch version.
• Webpack is considered as an implementation detail in the CLI which can change in the future.
• Issues arrises from the customization of the Webpack configuration are not supported by the Angular team.

[mattlewis92]

Hi @mattlewis92,

The root cause of the issue is that in your project you are using the webpackChunkName magic comments. In this case a fix for this is pretty straight forward especially since it breaks the runtime. But, in general there are some things to take note of:

• Webpack specific features are not supported by the Angular CLI team and any of these features can stop working without warning in any patch version.
• Webpack is considered as an implementation detail in the CLI which can change in the future.
• Issues arrises from the customization of the Webpack configuration are not supported by the Angular team.

Ah I see, thanks for digging into it! The first thing I had tried was ripping out all the webpack config customisations, but was still seeing the issue, I didn't even think about the magic comments 🤦‍♂️ Really appreciate you taking the time to look into it and I'm glad the fix was simple in the end 😄

[angular-automatic-lock-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.}