CODEWITHSUNDEEP
angularwebpacklazy-loading
Kouipheng LEE
Kouipheng LEE

Reputation: 83

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

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

Upvotes: 8

Views: 6106

Answers (3)

bradd
bradd

Reputation: 1085

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!

Upvotes: 3

PEsteves
PEsteves

Reputation: 196

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

Upvotes: 4

Thien Hoang
Thien Hoang

Reputation: 625

I assume that you're using Webpack for build Angular.

in webpack.config we a config attribute "output".

Change to (ex) :

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

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

In this case, our results will be like this: 0.89872d7bedaacc90c95a.bundle.js

Hope it helpful.

P/s: You also have this config in angular-cli I think

Upvotes: 0

Related Questions