I'm struggling to implement lazy loading in my Angular 2 (version 5.1.3) project.
While following Todd Motto's guide on Lazy Loading Code Splitting, I am hitting a roadblock in getting it to function correctly.
My app consists of multiple modules, some of which I want to be lazily loaded as most users do not utilize the functionality and the app size is substantial with everything bundled together.
The route configuration in app.module looks like this:
export const routes: Routes = [
{ path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{ path: 'login',
component: LoginComponent
},
{ path: 'home',
component: HomeComponent
},
{ path: 'reports-engine',
loadChildren: './reportsengine/reportsengine.module#ReportsEngineModule'
},
{ path: '**',
component: NotFoundComponent
}
];
Here is the structure of the ReportsEngine module:
export const routes: Routes = [
{
path: '',
component: ReportsComponent,
children: [{
path: '',
redirectTo: 'reports-engine',
pathMatch: 'full'
},
{
path: 'account',
component: Account
},
{
path: 'accounts-manage',
component: AccountsManage
},
{
path: '**',
component: NotFoundComponent
}]
}
];
In my webpack.config file (relevant parts), it is configured as follows:
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(cwd, 'build'),
publicPath: './build/',
sourceMapFilename: '[name].map'
},
rules.push({
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular2-template-loader'
] ,
test: /\.(ts|js)$/,
loaders: [
'angular-router-loader'
] ,
include: [
path.resolve(cwd, 'app')
]
});
Currently, only the main app.js and vendor.js files are being built (along with .map files), while the 0.chunk.js files are missing.
Upon navigating to the /reports-engine URL, I receive a 'page not found' error instead of the expected ReportsComponent.
I am unsure about what I might be overlooking.