ANGULAR LAZY LOADING WITH WEBPACK 2-1

ANGULAR 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’
]
},

Service Type

ANGULAR

Provider Name

Rnaura,

Chandigarh ,Mohali ,Mohali -160071,
Telephone No.9988133263

Area

Technology

Description

ANGULAR LAZY LOADING WITH WEBPACK 2-1 The webpack.prod.js file requires that the chunkFilename property is set in the output, so that webpack chunks the lazy load modules.

ANGULAR LAZY LOADING WITH WEBPACK 2-1