liveBook · Manning

RouterModule

As explained in Pro Angular 16

RouterModule is the Angular module that provides router functionality and directives for Angular applications.

RouterModule provides Angular routing functionality and the routerLink directive. Import it into a feature module when templates need declarative navigation. section 24.2.5 section 6.3.3

Use RouterModule in two closely related ways:

  • Import RouterModule directly to enable routerLink attributes that navigate to configured URLs such as /cart, /form/edit, or /. section 24.2.5 section 6.3.3
  • Use RouterModule.forChild with route definitions when a feature module owns its URLs and components, including lazy-loaded administration features. section 7.1.1
  • Keep routing configuration inside a dynamically loaded module so the module remains self-contained and declares the URLs and components it supports. section 7.1.1

Feature-module routing

Define child routes and include the resulting routing configuration in imports: let routing = RouterModule.forChild([{ path: "auth", component: AuthComponent }, { path: "main", component: AdminComponent }, { path: "**", redirectTo: "auth" }]); @NgModule({ imports: [CommonModule, FormsModule, routing] }) export class AdminModule { } section 7.1.1

Template navigation

Apply routerLink to a button or anchor: <button routerLink="/cart">Cart</button>. Angular navigates to the configured URL when the element is activated; the feature module must import RouterModule. section 6.3.3 section 24.2.5

Listing 7.5. The contents of the admin.module.ts file in the src/app/admin folder
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";
import { AuthComponent } from "./auth.component";
import { AdminComponent } from "./admin.component";
 
let routing = RouterModule.forChild([
    { path: "auth", component: AuthComponent },
    { path: "main", component: AdminComponent },
    { path: "**", redirectTo: "auth" }
]);
 
@NgModule({
    imports: [CommonModule, FormsModule, routing],
    declarations: [AuthComponent, AdminComponent]
})
export class AdminModule { }

Browse a complete AdminModule definition showing RouterModule.forChild, route declarations, imports, and component declarations together. section 7.1.1

How Pro Angular 16 covers it

How deep it goes
Demonstrates imports, routerLink targets, and RouterModule.forChild route definitions, but defers broader router configuration and navigation internals.
Examples
Uses cart navigation, administration child routes, edit and create links, and a cancel button returning to the root URL.
What it assumes
Assumes familiarity with Angular modules, components, templates, and configured routes while demonstrating the required module imports.
What you can do after
Builds feature-module navigation by importing RouterModule, applying routerLink, or defining child routes with RouterModule.forChild.
How it connects
Connects feature modules, lazy loading, routing configuration, routerLink, Router, and Angular components.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.