Angular Webpack router webpack-loader JavaScript
Need help with angular-router-loader?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
brandonroberts

Description

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

195 Stars 39 Forks 73 Commits 3 Opened issues

Services available

Need anything else?

angular-router-loader

CircleCI npm version

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.forRoot
    or
    RouterModule.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

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.