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

Question

I implemented a lazy loading module in angular 4. it works well. and when I go to a new page, it will load an additional js file, for example: 0.chunk.js, 1.chunk.js.

my question is: how to change this piece name? for example: 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 to use the webpack configuration outside of the Angular CLI with the angular-router-loader package:

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

webpack.config.js

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

:

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

, Angular cli. : https://github.com/angular/angular-cli/issues/5171

Answer 2

@angular/cli 1.3.0-beta. your-lazy-loading.module.chunk.js. , , npm install -g @angular/cli@1.3.0-beta.1 package.json

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

, npm install. , !

Answer 3

, Webpack Angular.

webpack.config "output".

(ex):

const DistDirectory = path.resolve(__dirname, '../dist');

...,
output: {
   path: DistDirectory,
   filename: '[name].[hash].bundle.js'
}

: 0.89872d7bedaacc90c95a.bundle.js

, .

P/s: angular -cli ,