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
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:
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
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!
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
require.ensureorimport? Please give us sample of this code.