Angular Component Router

A declarative router for Angular applications.

Install

Use your package manager of choice to install the package.

npm install @angular-component/router

OR

yarn add @angular-component/router

Installation with ng add

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.

Usage

To register the Router, add the

ComponentRouterModule.forRoot()

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

Router

Route

Route sorting

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):

• Named routes (e.g.

  /blog

  ) have priority over root route (

  /

  )
• Static routes (e.g.

  /blog/view

  ) have priority over parametrized (e.g.

  /blog/:id

  )
• Exact route (with

  exact

  set to

  true

  or omitted) has priority over non-exact (with

  exact

  set to

  false

  )
• Longer paths have priority over shorter

Route restrictions

Implementing the route restriction is as simple as adding a structural directive on a

route

The restriction doesn't stop the navigation. It simply removes the route from the configuration so the next eligible route will pick it up.

Navigating with Links

Use the

linkTo

Home
About
Blog

Adding classes to active links

To add classes to links that match the current URL path, use the

linkActive

Home
About
Blog

Using the Router service

To navigate from a component class, or get global route information, such as the current URL, or hash fragment, inject the

Router

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();
  }
}

Using Route Params

To get the route params, inject the

RouteParams

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);
  }
}

Using Query Params

To get the route params, inject the

QueryParams

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);
  }
}

Lazy Loading Modules

To lazy load a module, use the

load

route

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 { Component } from '@angular/core';

@Component({
  template:     <router>       <route path="/">         <app-lazy></app-lazy>       </route>       <route path="/" redirectto="/404"> </route>     </router>  ,
})
export class LazyRouteComponent {}

Implement the

ModuleWithRoute

import { NgModule } from '@angular/core';
import { ModuleWithRoute } from '@angular-component/router';

@NgModule({
  declarations: [LazyRouteComponent, LazyComponent],
})
export class LazyModule implements ModuleWithRoute {
  routeComponent = LazyRouteComponent;
}

Lazy Loading Components

To lazy load a component, use the

load

route

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),
  };
}

Contributors ✨

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!