[regression?] Angular 12 + webpackChunkName + namedChunks

[acalvo]

🐞 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: 11.2.x

Description

We are using the webpackChunkName magic comment on imports, i.e.:

import(/* webpackChunkName: "theme-" */`../../../generated/themes/${this.themeName}.json`)

This worked like a charm up to Angular11, since it generated anonymous IDs for every chunk except for these ones (which we need to have well-identified to apply custom preload and cache rules). This is a result sample with Angular11:

Once upgraded to Angular12, the names of the theme chunks appear in the "Names" column, but the chunk is generated with a numeric ID instead of the chunk name. Result example with Angular12:

I tried to set namedChunks to true in angular.json (was set to false). The result with Angular12 is:

The "theme" chucks generate as I need them (for example, theme-3.4fd260e3bfc1e3745532.js) but the rest of the chunks generate with long unnecessary names.

Isn't there a way to produce the same result I was getting in Angular11 and below?

🔬 Minimal Reproduction

https://github.com/acalvo/angular-named-chunks

git clone https://github.com/acalvo/angular-named-chunks.git
ng build --configuration production

🔥 Exception or Error

Not an error, just not honoring the named chunks:

Lazy Chunk Files                  | Names         |      Size
656.82c532ea1a8f7bbb9172.js       | theme-1       | 142 bytes
657.f2149dff8d67df841f86.js       | theme-0       | 142 bytes

🌍 Your Environment

Angular CLI: 12.0.4
Node: 14.17.0
Package Manager: npm 7.15.1
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.4
@angular-devkit/build-angular   12.0.4
@angular-devkit/core            12.0.4
@angular-devkit/schematics      12.0.4
@schematics/angular             12.0.4
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

[alan-agius4]

Webpack specific features are not supported by the Angular CLI.

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