Angular build ignores `webpackChunkName` magic comments in lazy module imports

[alexnoz]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Description

Angular build ignores webpackChunkName magic comments in lazy module imports.

🔬 Minimal Reproduction

1. Add webpack's magic comment to lazy module's import(), like this:

const routes: Routes = [{
  path: 'lazy',
  loadChildren: () =>
    import(
      /* webpackChunkName: 'some-name' */
      './some/lazy.module'
    ).then(m => m.LazyModule),
}];

2. Run ng build --prod.

Expected result:
There's a chunk named some-name-es2015.e2d08f36b5c9ed0b9118.js in dist/app.

Actual result:
The chunk is named something like this 7-es2015.e2d08f36b5c9ed0b9118.js.

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.23
Node: 10.17.0
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?
webpackChunkName works as expected with other dynamic imports, e.g. inside components. Other magic comments work (tried webpackPrefetch).

[filipesilva]

We don't have it as a goal to enable these magic comments. Some might work, but it's not something we try to keep working or test for, so relying on them isn't recommended.

In this particular case I think it's related to how we have to process those imports to work with AOT, or maybe it's related to the namedChunks option we expose. Not sure. If it's the former, then using Ivy might make it work.

But since we don't try to expose this webpack functionality at all I don't this is something we'd try maintain a fix for.

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