Awesome
angular-router-loader
A Webpack loader for Angular that enables string-based module loading with the Angular Router
Package was previously named angular2-router-loader
Installation
npm install angular-router-loader --save-dev
Usage
Add the angular-router-loader to your typescript loaders
Angular Version >= 5
loaders: [
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader'
]
},
{
test: /\.(ts|js)$/,
loaders: [
'angular-router-loader'
]
}
]
Angular Version < 5
loaders: [
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-router-loader'
]
}
]
Lazy Loading
In your route configuration, use loadChildren with a relative path to your lazy loaded angular module. The string is delimited with a # where the right side of split is the angular module class name.
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: 'lazy', loadChildren: './lazy.module#LazyModule' }
];
NOTE: When specifying a relative path to lazy loaded module, one of the following two conditions must hold:
- The routes are defined in the same module file where it is imported with
RouterModule.forRootorRouterModule.forChild - The routes are defined in a separate routing file, and that routing file is a sibling of module file.
Synchronous Loading
For synchronous module loading, add the sync=true as a query string value to your loadChildren string. The module will be included in your bundle and not lazy-loaded.
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: 'lazy', loadChildren: './lazy.module#LazyModule?sync=true' }
];
Additional Documentation
Credits
This loader was inspired by the following projects.
es6-promise-loader by PatrickJS
angular2-template-loader by Sean Larkin