ANGULAR LAZY LOADING WITH WEB PACK 2-1
AOT production build
The webpack.prod.js file requires that the chunkFilename property is set in the output, so that webpack chunks the lazy load modules.
- output: {
- path: ‘./wwwroot/’,
- filename: ‘dist/[name].[hash].bundle.js’,
- chunkFilename: ‘dist/[id].[hash].chunk.js’,
- publicPath: ‘/’
- },
The angular-router-loader is added to the loaders. The genDir folder defined here must match the definition in tsconfig-aot.json.
- module: {
- rules: [
- {
- test: /\.ts$/,
- loaders: [
- ‘awesome-typescript-loader’,
- ‘angular-router-loader?aot=true&genDir=aot/’
- ]
- },
JIT development build
The webpack.dev.js file requires that the chunkFilename property is set in the output, so that webpack chunks the lazy load modules.
- output: {
- path: ‘./wwwroot/’,
- filename: ‘dist/[name].bundle.js’,
- chunkFilename: ‘dist/[id].chunk.js’,
- publicPath: ‘/’
- },
The angular-router-loader is added to the loaders.
- module: {
- rules: [
- {
- test: /\.ts$/,
- loaders: [
- ‘awesome-typescript-loader’,
- ‘angular-router-loader’,
- ‘angular2-template-loader’,
- ‘source-map-loader’,
- ‘tslint-loader’
- ]
- },
best blog.
ReplyDeleteAt Techlancers Middle East, our team of app developers in Dubai combines creativity, technical expertise, and a deep understanding of user behavior to build high-performing mobile applications. Whether you're a startup or an established business, we develop custom apps that solve real problems and deliver measurable results. With a focus on innovation and quality, our developers ensure your app is built to succeed in a competitive digital landscape.
ReplyDelete