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

Question

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

Answer 1

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

Answer 2

Update @angular/cli to 1.3.0-beta. It automatically provides name for your lazy chunks as your-lazy-loading.module.chunk.js. All I need to do is npm install -g @angular/[email protected] and update package.json as

devDependencies": {
    "@angular/cli": "1.3.0-beta.1", 
...
}

Finally, run npm install. So, you are good to go!