angular-routing-test

angular-routing

A declarative router for Angular applications.

Install

Use your package manager of choice to install the package.

npm install angular-routing

OR

yarn add angular-routing

Usage

To register the Router, add the RoutingModule.forRoot() to your AppModule imports.

import { RoutingModule } from 'angular-routing';

@NgModule({
  imports: [
    // ... other imports
    RoutingModule.forRoot()
  ]
})
export class AppModule {}

Or in a feature module

import { RoutingModule } from 'angular-routing';

@NgModule({
  imports: [
    // ... other imports
    RoutingModule
  ]
})
export class FeatureModule {}

After your components are registered, use the Router and Route components to register some routes.

<router>
  <route path="/blog/**">
    <app-blog *routeComponent></app-blog>
  </route>
  <route path="/posts/:postId">
    <app-post *routeComponent></app-post>
  </route>
  <route path="/about">
    <app-about *routeComponent></app-about>
  </route>
  <route path="/" redirectTo="/blog">
  </route>
  <route path="**">
    <app-page-not-found *routeComponent></app-page-not-found>
  </route>
</router>

Navigating with Links

Use the linkTo directive with a full path to register links handled by the router.

<a linkTo="/">Home</a>
<a linkTo="/about">About</a>
<a linkTo="/blog">Blog</a>

Adding classes to active links

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

<a linkTo="/" linkActive="active">Home</a>
<a linkTo="/about" linkActive="active">About</a>
<a linkTo="/blog" linkActive="active">Blog</a>

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 service.

import { Component } from '@angular/core';
import { Router } from 'angular-routing';

@Component({...})
export class MyComponent {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.url$.subscribe();
    this.router.hash$.subscribe();
  }

  goHome() {
    this.router.go('/');
  }
}

Using Route Params

To get the route params, inject the RouteParams observable. Provide a type for the shape of the route params object.

import { Component } from '@angular/core';
import { RouteParams } from 'angular-routing';

@Component({...})
export class MyComponent {
  constructor(
    private routeParams$: RouteParams<{ postId: string }>
  ) {}

  ngOnInit() {
    this.routeParams$.subscribe(console.log);
  }
}

Using Query Params

To get the route params, inject the QueryParams observable. Provide a type for the shape of the query params object.

import { Component } from '@angular/core';
import { QueryParams } from 'angular-routing';

@Component({...})
export class MyComponent {
  constructor(
    private queryParams$: QueryParams<{ debug: boolean }>
  ) {}

  ngOnInit() {
    this.queryParams$.subscribe(console.log);
  }
}

Lazy Loading Modules

To lazy load a module, use the load binding on the route component.

import { Component } from '@angular/core';

@Component({
  template: `
    <router>
      <route path="/lazy/**" [load]="modules.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-routing';

@Component({
  template: `
    <router>
      <route path="/">
        <app-lazy *routeComponent></app-lazy>
      </route>
    </router>  
  `
})
export class LazyRouteComponent { }

Implement the ModuleWithRoute interface for the route component to render after the module is loaded.

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

Lazy Loading Components

To lazy load a component, use the load binding on the route component.

import { Component } from '@angular/core';

@Component({
  template: `
    <router>
      <route path="/lazy" [load]="components.lazy">
      </route>
    </router>
  `
})
export class MyComponent {
  components = {
    lazy: () => import('./lazy/lazy.component').then(m => m.LazyComponent)
  }
}

Changelog

0.1.1 (2020-07-02)

Bug Fixes

• clean up observables, updated docs (cba6db6)

Features

• add Angular Getting Started application (331e825)
• add NgRx example app (8f024e4)
• add router lib (c2502f6)
• add support for lazy loading NgModules (0d2aa76)
• add tour of heroes app (588dbe6)

BREAKING CHANGES

• The input for lazy loading has change from [loadComponent] to [load] to support components and NgModules

BEFORE:

<route path="/path" [loadComponent]=""></route>

AFTER:

<route path="/path" [load]=""></route>