Angular 13.2.5: ChunkLoadError - Loading chunk file failed

[cloverzero]

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

compiler-cli

Is this a regression?

No

Description

Browser console output:

ChunkLoadError: Loading chunk 6528 failed.
(error: http://localhost:8080/6528.483d80564d6ad3bc.js)

Build output:

Lazy Chunk Files                                                                  | Names                              |  Raw Size | Estimated Transfer Size
...
6528.61224ca671bf4352.css, modules-dashboard-dashboard-module.483d80564d6ad3bc.js | modules-dashboard-dashboard-module | 791.85 kB |               169.58 kB
...

But in the runtime.xxxxxxxxxx.js, you can see:

{
  ...
  6528:"483d80564d6ad3bc",
  ...
}

So I think there are some problems with the compiler. modules-dashboard-dashboard-module should be replaced with 6528.

Please provide a link to a minimal reproduction of the bug

https://github.com/cloverzero/temp-ng-minimal

Please provide the exception or error you saw

ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 6528 failed.
(error: http://localhost:8080/6528.483d80564d6ad3bc.js)
ChunkLoadError: Loading chunk 6528 failed.
(error: http://localhost:8080/6528.483d80564d6ad3bc.js)
    at Object.a.f.j (runtime.81647aa4ce430837.js:1:4986)
    at runtime.81647aa4ce430837.js:1:743
    at Array.reduce (<anonymous>)
    at Function.a.e (runtime.81647aa4ce430837.js:1:722)
    at loadChildren (main.201a4656125ced11.js:1:31902)
    at Tr.loadModuleFactory (main.201a4656125ced11.js:1:486382)
    at Tr.load (main.201a4656125ced11.js:1:486027)
    at V.project (main.201a4656125ced11.js:1:478250)
    at V._tryNext (main.201a4656125ced11.js:1:61856)
    at V._next (main.201a4656125ced11.js:1:61774)
    at G (polyfills.9afac977b0dbd767.js:1:15935)
    at G (polyfills.9afac977b0dbd767.js:1:15471)
    at polyfills.9afac977b0dbd767.js:1:16784
    at T.invokeTask (polyfills.9afac977b0dbd767.js:1:7170)
    at Object.onInvokeTask (main.201a4656125ced11.js:1:311724)
    at T.invokeTask (polyfills.9afac977b0dbd767.js:1:7091)
    at I.runTask (polyfills.9afac977b0dbd767.js:1:2565)
    at L (polyfills.9afac977b0dbd767.js:1:9168)
    at m.invokeTask [as invoke] (polyfills.9afac977b0dbd767.js:1:8251)
    at S (polyfills.9afac977b0dbd767.js:1:20169)

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

Angular CLI: 13.2.5
Node: 14.18.1
Package Manager: npm 6.14.15
OS: darwin x64

Angular: 13.2.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.5
@angular-devkit/build-angular   13.2.5
@angular-devkit/core            13.2.5
@angular-devkit/schematics      13.2.5
@angular/cli                    13.2.5
@schematics/angular             13.2.5
rxjs                            6.6.3
typescript                      4.5.5

Anything else?

No response

[alan-agius4]

Does this happen with @angular-devkit/build-angular version 13.2.4?

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[cloverzero]

Does this happen with @angular-devkit/build-angular version 13.2.4?

Yes

[alan-agius4]

In that case we’ll require a reproduction.

[cloverzero]

@alan-agius4 Here is the reproduction: https://github.com/cloverzero/temp-ng-minimal

[alan-agius4]

Hi @cloverzero, I tied your reproduction locally but I am getting a different sort of error.

[cloverzero]

@alan-agius4 I have fixed this error. Sorry I didn't realize you were going to run it. I want to mention that it works when ng serve. If you run ng build --configuration production, you'll see the incorrect output. And then, you run with the dist output and see the error I mentioned.

[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.}