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

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

Add the angular2-router-loader to your typescript loaders

loaders: [
  {
    test: /\.ts$/,
    loaders: [
      'awesome-typescript-loader',
      'angular2-router-loader'
    ]
  }
]

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

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

Options are provided as a query string with the angular2-router-loader

loaders: [
  'angular2-router-loader?option=value'
]

Logs the file, loadChildren string found and replacement string used to the console.

Changes to default delimiter for the module path/module name string

Sets the loader string returned for code splitting.

original

{
  path: 'lazy',
  loadChildren './lazy.module#LazyModule'
}

replacement

{
  path: 'lazy',
  loadChildren: () => new Promise(function (resolve) {
    (require as any).ensure([], function (require: any) {
      resolve(require('./lazy/lazy.module')['LazyModule']);
    });
  })
}

If you prefer to use System.import, set the loader to system

NOTE: Using system only works with Webpack 2. Webpack 1 users should use the default.

replacement

{
  path: 'lazy',
  loadChildren: () => System.import('./lazy/lazy.module').then(function(module) {
    return module['LazyModule'];
  })
}

Used when bundling from an AoT compilation build.

Enables replacement of the loadChildren string to load the factory file and factory class based on the provided file and class.

Sets the suffix added to the filename for the factory file created by the AoT compiler

Sets the class suffix added to the file class for the factory created by the AoT compiler

If you set the genDir in the angularCompilerOptions to compile to a separate directory, this option needs to be set to the relative path that directory.

loaders: [
  'angular2-router-loader?aot=true'
]

original

{
  path: 'lazy',
  loadChildren './lazy.module#LazyModule'
}

replacement

{
  path: 'lazy',
  loadChildren: () => new Promise(function (resolve) {
    (require as any).ensure([], function (require: any) {
      resolve(require('./lazy/lazy.module.ngfactory')['LazyModuleNgFactory']);
    });
  })
}

This loader was inspired by the following projects.

es6-promise-loader by PatrickJS

angular2-template-loader by Sean Larkin

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