namedChunks is not honored for lazy-loading routes with import syntax

[cexbrayat]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

This only occurs with the new import syntax for lazy-loading

Description

If a project uses routes with the new import syntax for lazy-loading then building with ng build --prod --named-chunks donesn't produce chunks with proper names.

🔬 Minimal Reproduction

See https://github.com/cexbrayat/named-chunks if you want to give it a try or do as follow:

ng new named-chunks --defaults
cd named-chunks
ng g m admin
ng g c admin/admin

Update app.component.html with:

<router-outler></router-outlet>

Update app.module.ts with:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([{
      path: '', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
    }])
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

and admin.module.ts with:

@NgModule({
  declarations: [AdminComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([{
      path: '', component: AdminComponent
    }])
  ]
})
export class AdminModule { }

Then run ng build --named-chunks --prod

🔥 Exception or Error

The command gives:

Date: 2019-04-23T14:08:26.013Z
Hash: b086d3f22f80b5381b93
Time: 20231ms
chunk {0} runtime-es5.9a4b80be062c481c4177.js (runtime) 2.15 kB [entry] [rendered]
chunk {1} main-es5.a363bff3494058fe034b.js (main) 238 kB [initial] [rendered]
chunk {2} polyfills-es5.5f25a1a39dcc2b4b4710.js (polyfills) 110 kB [initial] [rendered]
chunk {3} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
chunk {4} 4-es5.dc95059053c87fdc900f.js () 184 bytes  [rendered]

instead of the expected:

Date: 2019-04-23T14:04:01.246Z
Hash: ff2a50cd51bab1fc5228
Time: 21729ms
chunk {0} runtime-es5.44e72053f1ea6ddccae4.js (runtime) 2.18 kB [entry] [rendered]
chunk {1} admin-admin-module-ngfactory-es5.7eb7ffe20356330c4671.js (admin-admin-module-ngfactory) 984 bytes  [rendered]
chunk {2} main-es5.ddc6f18d9107a1d2c2d4.js (main) 266 kB [initial] [rendered]
chunk {3} polyfills-es5.b96063cf2c012927fe18.js (polyfills) 110 kB [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]

that you can obtain using path: '', loadChildren: './admin/admin.module#AdminModule' for the route declaration.

🌍 Your Environment

Angular CLI: 8.0.0-beta.16
Node: 11.11.0
OS: darwin x64
Angular: 8.0.0-beta.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-beta.16
@angular-devkit/build-angular     0.800.0-beta.16
@angular-devkit/build-optimizer   0.800.0-beta.16
@angular-devkit/build-webpack     0.800.0-beta.16
@angular-devkit/core              8.0.0-beta.16
@angular-devkit/schematics        8.0.0-beta.16
@angular/cli                      8.0.0-beta.16
@ngtools/webpack                  8.0.0-beta.16
@schematics/angular               8.0.0-beta.16
@schematics/update                0.800.0-beta.16
rxjs                              6.4.0
typescript                        3.4.4
webpack                           4.30.0

Anything else relevant?

ng serve is also affected.

[filipesilva]

Tried poking around in the webpack internals to see if we could make it auto-name import() deps, but ran into webpack/webpack#9075. Not sure there's a good mechanism to do this.