RouterModule configuration in Angular

Introduction

RouterModule helps your Angular app switch between different pages or views without reloading the whole page.

You want to create a multi-page app with different URLs.

You need to show different components based on the URL path.

You want to add navigation links that change the view smoothly.

You want to protect some pages and redirect users if needed.

Syntax

Angular

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

The routes array defines URL paths and which component to show.

RouterModule.forRoot(routes) sets up the router with your routes.

Examples

Simple route for a dashboard page.

Angular

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent }
];

Redirect empty path to dashboard.

Angular

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
];

Catch-all route for unknown URLs.

Angular

const routes: Routes = [
  { path: '**', component: PageNotFoundComponent }
];

Sample Program

This example sets up a simple Angular app with three routes: home, about, and a fallback for unknown pages. Navigation links let you switch pages without reloading. The router-outlet shows the matched component.

Angular

import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  standalone: true,
  template: `<h2>Home Page</h2><p>Welcome to the home page!</p>`
})
class HomeComponent {}

@Component({
  selector: 'app-about',
  standalone: true,
  template: `<h2>About Page</h2><p>Learn more about us here.</p>`
})
class AboutComponent {}

@Component({
  selector: 'app-not-found',
  standalone: true,
  template: `<h2>Page Not Found</h2><p>Sorry, this page does not exist.</p>`
})
class NotFoundComponent {}

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule, HomeComponent, AboutComponent, NotFoundComponent],
  template: `
    <nav>
      <a routerLink="/home" aria-label="Go to Home page">Home</a> |
      <a routerLink="/about" aria-label="Go to About page">About</a>
    </nav>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
class AppComponent {}

bootstrapApplication(AppComponent, {
  providers: [
    RouterModule.forRoot(routes)
  ]
});

Important Notes

Always include a wildcard ** route to catch unknown URLs and show a friendly message.

Use pathMatch: 'full' when redirecting empty paths to avoid partial matches.

Remember to add RouterModule to your component imports and exports for routing to work.

Summary

RouterModule lets Angular apps switch views based on URL paths.

Define routes as an array of path-component pairs.

Use RouterModule.forRoot(routes) to set up routing in your app.