Routing Configuration

Code

import { Routes } from "@angular/router";
import { HomeComponent } from "./home.component";
import { UserComponent } from "./user.component";

export const routes: Routes = [
  { path: "", component: HomeComponent, title: "Home" },
  { path: "user/:id", component: UserComponent },
  { path: "about", loadComponent: () =>
      import("./about.component").then(m => m.AboutComponent) },
  { path: "**", redirectTo: "" }
];

// In root component template:
// <a routerLink="/">Home</a>
// <a routerLink="/user/42">User 42</a>
// <router-outlet></router-outlet>

// Navigate programmatically:
// this.router.navigate(["/user", id]);

Explanation

Routes map URL paths to components and render matched views inside router-outlet. Dynamic segments like :id become route parameters accessible via ActivatedRoute. loadComponent splits code into chunks loaded on demand for faster initial loads.

More Angular Snippets