angular2-router-loader

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

Installation

npm install angular2-router-loader --save-dev

Usage

Add the angular2-router-loader to your typescript loaders

loaders: [
  {
    test: /\.ts$/,
    loaders: [
      'awesome-typescript-loader',
      'angular2-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' }
];

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' }
];

Module Loading

For external npm module loading (multi-package apps), add the resolution=module query suffix to the loadChildren expression. This will try to import given module and extract referenced Angular Module.

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'lazy', loadChildren 'some-module#LazyModule?resolution=module' }
];

In AOT mode, Module resolution will try to extract LazyModuleNgFactory from some-module in the example. So don't forget to export it in your external module.

Additional Documentation

• Loader Options
• AoT Compilation Options

Credits

This loader was inspired by the following projects.

es6-promise-loader by PatrickJS

angular2-template-loader by Sean Larkin

License

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