How to change chunk.js name in angular 4 lazy loading

angular, lazy-loading, webpack

Solution

So far the only way I know how to name lazy loaded chunks is by using a webpack config outside of Angular CLI with the angular-router-loader package:

https://github.com/brandonroberts/angular-router-loader/blob/master/docs/options.md#lazy-loading-options

Here's an example of the loader in a webpack.config.js file

{
    test: /\.ts$/,
    loaders: [
      {
          loader: 'awesome-typescript-loader',
          options: { configFileName: helpers.root('src', 'tsconfig.json')
      }
      },  
      'angular-router-loader',
      'angular2-template-loader'
    ]
}

Then the routing paths should by configured like so:

{
  path: 'lazy',
  loadChildren './lazy.module#LazyModule?chunkName=MyChunk'
}

I've been waiting for a while for this feature to get added to the angular cli. Here's the issue: https://github.com/angular/angular-cli/issues/5171

Problem

I implemented lazy loading module in angular 4. it work well. and when I navigate to the new page, it will load extra js file like: 0.chunk.js, 1.chunk.js. my question is: how to change that chunk name? ex: 1.chunk.js => about.js 0.chunk.js => user.js

Original source