The Angular Router

The Angular Router maps URLs to components — with deep linking, history, guards, and lazy loading built in.

4 min read Level 2/5 #angular#router

What you'll learn

Provide the router with provideRouter
Add a router-outlet to render matched routes
Navigate with routerLink

A single-page app would feel broken without real URLs — bookmarks, refresh, and the back button all need to work. The Angular Router gives you that: a URL-to-component mapping with history, guards, lazy loading, and more.

Provide the router

In a standalone app, register routes from your app.config.ts.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

Render with router-outlet

Wherever you place <router-outlet />, the router will mount the matched component.

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet />

Navigate declaratively

routerLink intercepts clicks and uses the History API — no full page reload.

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  templateUrl: './app.component.html',
})
export class AppComponent {}

The Router updates window.location, pushes a history entry, and renders the matching route — all client-side.

Route Configuration →