Angular Component Router - A declarative router for Angular applications
Use your package manager of choice to install the package.
npm install @angular-component/router
OR
yarn add @angular-component/router
You can use ng add to install the package by using the command below.
ng add @angular-component/router
The above command will install the package, and add the ComponentRouterModule import in the AppModule.
To register the Router, add the
ComponentRouterModule.forRoot()to your AppModule imports.
import { ComponentRouterModule } from '@angular-component/router';@NgModule({ imports: [ // ... other imports ComponentRouterModule.forRoot(), ], }) export class AppModule {}
Or in a feature module
import { ComponentRouterModule } from '@angular-component/router';@NgModule({ imports: [ // ... other imports ComponentRouterModule, ], }) export class FeatureModule {}
After your components are registered, use the
Routerand
Routecomponents to register some routes.
Angular routing is sorting the routes upon registration, based on priority. The order in which the routes are defined in your template is therefore not important.
The following two examples will give the same results
and
The sorting algorithm has only a few rules (ordered by importance):
/blog) have priority over root route (
/)
/blog/view) have priority over parametrized (e.g.
/blog/:id)
exactset to
trueor omitted) has priority over non-exact (with
exactset to
false)
Implementing the route restriction is as simple as adding a structural directive on a
routecomponent
The restriction doesn't stop the navigation. It simply removes the route from the configuration so the next eligible route will pick it up.
Use the
linkTodirective with a full or relative path to register links handled by the router.
Home About Blog
To add classes to links that match the current URL path, use the
linkActivedirective.
Home About Blog
To navigate from a component class, or get global route information, such as the current URL, or hash fragment, inject the
Routerservice.
import { Component } from '@angular/core'; import { Router } from '@angular-component/router';@Component({...}) export class MyComponent { constructor(private router: Router) {}
ngOnInit() { this.router.url$.subscribe(); this.router.hash$.subscribe(); }
goHome() { this.router.go('/'); }
goForward() { this.router.forward(); }
goBack() { this.router.back(); } }
To get the route params, inject the
RouteParamsobservable. Provide a type for the shape of the route params object.
import { Component } from '@angular/core'; import { RouteParams } from '@angular-component/router';@Component({...}) export class MyComponent { constructor( private routeParams$: RouteParams ) {}
ngOnInit() { this.routeParams$.subscribe(console.log); } }
To get the route params, inject the
QueryParamsobservable. Provide a type for the shape of the query params object.
import { Component } from '@angular/core'; import { QueryParams } from '@angular-component/router';@Component({...}) export class MyComponent { constructor( private queryParams$: QueryParams ) {}
ngOnInit() { this.queryParams$.subscribe(console.log); } }
To lazy load a module, use the
loadbinding on the
routecomponent.
import { Component } from '@angular/core';@Component({ template:
<router> <route path="/lazy"> </route> </router>
, }) export class MyComponent { modules = { lazy: () => import('./lazy/lazy.module').then((m) => m.LazyModule), }; }
Register a component to register the child routes.
import { NgModule, Component } from '@angular/core'; import { ModuleWithRoute } from '@angular-component/router';@Component({ template:
<router> <route path="/"> <app-lazy></app-lazy> </route> <route path="/" redirectto="/404"> </route> </router>
, }) export class LazyRouteComponent {}
Implement the
ModuleWithRouteinterface for the route component to render after the module is loaded.
@NgModule({ declarations: [LazyRouteComponent, LazyComponent], }) export class LazyModule implements ModuleWithRoute { routeComponent = LazyRouteComponent; }
To lazy load a component, use the
loadbinding on the
routecomponent.
import { Component } from '@angular/core';@Component({ template:
<router> <route path="/lazy"> </route> </router>
, }) export class MyComponent { components = { lazy: () => import('./lazy/lazy.component').then((m) => m.LazyComponent), }; }
Thanks goes to these wonderful people (emoji key):
Brandon 💻 📖 ⚠️ |
Miroslav Jonaš 💻 📖 ⚠️ |
Santosh Yadav 💻 📖 |
Kyle Cannon 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!