Easily add named routes to your Angular 7 projects.
- Use named routes with angular router
- Supports lazy loaded routes
IMPORTANT: To use this library in projects with lazy loaded modules, you must enable PreloadAllModules
preloading strategy the app router.
import { RouterModule, PreloadAllModules } from '@angular/router';
...
@NgModule({
imports: [
RouterModule.forRoot(app_routes, {
preloadingStrategy: PreloadAllModules
})
],
exports: [RouterModule]
})
export class AppRoutingModule {}
Using npm:
npm install --save ngx-named-routes
Using yarn:
yarn add ngx-named-routes
import { NgxNamedRoutesService } from 'ngx-named-routes';
import: [
...
NgxNamedRoutesService,
...
]
Remember to do it after RouterConfigLoadEnd router event:
import { RouterConfigLoadEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
...
export class AppModule {
public constructor(
private router: Router,
private ngxNamedRoutesService: NgxNamedRoutesService,
) {
router.events.pipe(filter(event => event instanceof RouteConfigLoadEnd)).subscribe(event => {
ngxNamedRoutesService.loadRoutes();
});
}
}
You can add the route name directly in the routes array inside the routing module. Notice that you'll need to change the routes array type:
export const app_routes: Array<INamedRoute> = [
{
path: 'lazy',
name: 'lazy',
loadChildren: './lazy/lazy.module#LazyModule'
},
{
path: 'login',
name: 'login',
children: [
{
path: 'reset_password',
name: 'login.reset_password',
loadChildren: './lazy/lazy.module#LazyModule'
}
]
},
{
path: '**',
redirectTo: 'lazy'
}
];
@NgModule({
imports: [
RouterModule.forRoot(app_routes, {
preloadingStrategy: PreloadAllModules
})
],
exports: [RouterModule]
})
export class AppRoutingModule {}
NOTE: You don't need to add a name to all the routes defined in your router, just the ones you want to call by their name.
To call a route by its name, just import NgxNamedRoutesService in the component you are working on and call getRoute
method:
import { Router } from '@angular/router';
import { NgxNamedRoutesService } from 'ngx-named-routes';
...
export class SomeComponent {
public constructor(
private router: Router,
private ngxNamedRoutesService: NgxNamedRoutesService
) {}
public goToTestView() {
this.router.navigate([this.ngxNamedRoutesService.getRoute('lazy.test')]);
}
}
Thats all, you can get any of your named routes using this method, no matter if it's in an aeger or lazy loaded module.
Hope you enjoy it! Issues and PRs are welcome!!!