ANGULAR LAZY LOADING WITH WEBPACK 2-1

ANGULAR LAZY LOADING WITH WEBPACK 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’
  • ]
  • },

About the Author

admin administrator

Leave a Reply