Repository files navigation

A Webpack loader for Angular that enables string-based module loading with theAngular Router

Package was previously namedangular2-router-loader

npm install angular-router-loader --save-dev

Add theangular-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']}]

In your route configuration, useloadChildren 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';exportconstroutes:Routes=[{path:'lazy',loadChildren:'./lazy.module#LazyModule'}];

NOTE: When specifying a relative path to lazy loaded module, one of the following two conditionsmust hold:

• The routes are defined in the same module file where it is imported withRouterModule.forRoot orRouterModule.forChild
• The routes are defined in a separate routing file, and that routing file is a sibling of module file.

For synchronous module loading, add thesync=true as a query string value to yourloadChildren string. The module will be included in your bundle and not lazy-loaded.

import{Routes}from'@angular/router';exportconstroutes:Routes=[{path:'lazy',loadChildren:'./lazy.module#LazyModule?sync=true'}];

• Loader Options
• AoT Compilation Options
• Lazy Loading Options

This loader was inspired by the following projects.

es6-promise-loader byPatrickJS

angular2-template-loader bySean Larkin

MIT (http://www.opensource.org/licenses/mit-license.php)