Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brandonroberts/angular-router-loader
A Webpack loader that enables string-based module loading with the Angular Router
https://github.com/brandonroberts/angular-router-loader
angular router webpack webpack-loader
Last synced: 29 days ago
JSON representation
A Webpack loader that enables string-based module loading with the Angular Router
- Host: GitHub
- URL: https://github.com/brandonroberts/angular-router-loader
- Owner: brandonroberts
- Created: 2016-09-11T02:47:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-06-15T06:33:00.000Z (over 3 years ago)
- Last Synced: 2024-11-06T03:47:59.622Z (about 1 month ago)
- Topics: angular, router, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 187
- Watchers: 12
- Forks: 39
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular-components - angular-router-loader - A Webpack loader that enables string-based module loading with the Angular Router. (Uncategorized / Uncategorized)
- awesome-angular-components - angular-router-loader - A Webpack loader that enables string-based module loading with the Angular Router. (Uncategorized / Uncategorized)
README
# angular-router-loader
[](https://circleci.com/gh/brandonroberts/angular-router-loader)
[](https://badge.fury.io/js/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**
```ts
loaders: [
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader'
]
},
{
test: /\.(ts|js)$/,
loaders: [
'angular-router-loader'
]
}
]
```
**Angular Version < 5**
```ts
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.
```ts
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.
```ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: 'lazy', loadChildren: './lazy.module#LazyModule?sync=true' }
];
```
## Additional Documentation
* [Loader Options](./docs/options.md#general-loader-options)
* [AoT Compilation Options](./docs/options.md#loader-options-aot-compilation)
* [Lazy Loading Options](./docs/options.md#lazy-loading-options)
## Credits
This loader was inspired by the following projects.
[es6-promise-loader](https://github.com/gdi2290/es6-promise-loader) by [PatrickJS](https://twitter.com/@gdi2290)
[angular2-template-loader](https://github.com/TheLarkInn/angular2-template-loader) by [Sean Larkin](https://twitter.com/@TheLarkInn)
### License
MIT (http://www.opensource.org/licenses/mit-license.php)