Angular Router : guide complet du routing

Prérequis

Le Router Angular est inclus dans @angular/router. Pour l'activer dans une application standalone (Angular 17+), il suffit de fournir le router dans 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)]
};

Configurer le Router

Les routes sont définies dans un tableau de type Routes. Chaque objet associe un path à un composant.

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

export const routes: Routes = [
  { path: '',        component: HomeComponent },
  { path: 'about',   component: AboutComponent },
  { path: '**',      component: NotFoundComponent }  // wildcard
];

Dans ton template racine, ajoute la directive <router-outlet> qui sert de point d'injection pour les vues :

<!-- app.component.html -->
<nav>
  <a routerLink="/">Accueil</a>
  <a routerLink="/about">À propos</a>
</nav>
<router-outlet />

RouterLink et navigation template

La directive routerLink remplace les balises <a href> classiques pour naviguer sans rechargement de page.

<!-- Navigation simple -->
<a routerLink="/about">À propos</a>

<!-- Avec tableau de segments -->
<a [routerLink]="['/articles', article.id]">Lire l'article</a>

<!-- Avec query params -->
<a [routerLink]="['/search']" [queryParams]="{ q: 'angular' }">Rechercher</a>

La directive routerLinkActive ajoute automatiquement une classe CSS quand la route est active :

<a routerLink="/about" routerLinkActive="active-link">À propos</a>

<!-- Exact match (évite que '/' soit actif sur toutes les pages) -->
<a routerLink="/" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">Accueil</a>

Paramètres de routes

Les paramètres dynamiques se déclarent avec : dans le path. On les récupère via ActivatedRoute.

// app.routes.ts
{ path: 'articles/:id', component: ArticleDetailComponent }

// article-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-article-detail', templateUrl: './article-detail.component.html' })
export class ArticleDetailComponent implements OnInit {
  articleId!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // Snapshot — valeur initiale (ne réagit pas aux changements)
    this.articleId = this.route.snapshot.paramMap.get('id')!;

    // Observable — réagit si le composant est réutilisé sans rechargement
    this.route.paramMap.subscribe(params => {
      this.articleId = params.get('id')!;
    });
  }
}

Pour récupérer les query params (?q=angular) :

this.route.queryParamMap.subscribe(params => {
  const query = params.get('q');
});

Navigation programmatique

Depuis un composant TypeScript, utilise le service Router pour naviguer après une action (soumission de formulaire, clic sur un bouton, etc.).

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

@Component({ selector: 'app-login', templateUrl: './login.component.html' })
export class LoginComponent {

  constructor(private router: Router) {}

  onLogin() {
    // Navigation simple
    this.router.navigate(['/dashboard']);

    // Avec paramètre
    this.router.navigate(['/articles', 42]);

    // Avec query params
    this.router.navigate(['/search'], { queryParams: { q: 'angular' } });

    // Relatif à la route courante
    this.router.navigate(['../detail'], { relativeTo: this.route });
  }
}

Lazy Loading

Le lazy loading permet de charger un module ou un composant uniquement quand l'utilisateur navigue vers sa route — ce qui réduit le bundle initial et améliore le temps de chargement.

// app.routes.ts — Lazy loading avec loadComponent (standalone)
export const routes: Routes = [
  { path: '',          component: HomeComponent },
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then(m => m.DashboardComponent)
  },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes').then(m => m.ADMIN_ROUTES)
  }
];

// admin/admin.routes.ts
import { Routes } from '@angular/router';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { UsersComponent } from './users.component';

export const ADMIN_ROUTES: Routes = [
  { path: '',       component: AdminDashboardComponent },
  { path: 'users',  component: UsersComponent }
];

Route Guards

Les guards protègent les routes. Le plus courant est canActivate — il bloque l'accès si l'utilisateur n'est pas authentifié.

// auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const auth   = inject(AuthService);
  const router = inject(Router);

  if (auth.isLoggedIn()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};

// app.routes.ts — appliquer le guard
{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [authGuard]
}

Angular propose plusieurs types de guards :

• canActivate — bloque l'accès à une route
• canActivateChild — bloque l'accès aux routes enfants
• canDeactivate — demande confirmation avant de quitter (ex : formulaire non sauvegardé)
• canMatch — contrôle si une route peut être matchée (remplace canLoad)
• resolve — précharge des données avant d'activer la route

Bonnes pratiques

• Toujours déclarer la route wildcard ** en dernier
• Utiliser le lazy loading pour toutes les sections non critiques au démarrage
• Regrouper les routes d'un domaine dans un fichier feature.routes.ts dédié
• Utiliser des guards fonctionnels (CanActivateFn) plutôt que les classes (déprécié depuis Angular 15)
• Précharger les routes lazy avec PreloadAllModules ou une stratégie personnalisée
• Utiliser withComponentInputBinding() pour injecter les params directement dans les @Input()

// app.config.ts — activation du binding automatique des params
import { provideRouter, withComponentInputBinding, withPreloading, PreloadAllModules } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withComponentInputBinding(),        // params -> @Input()
      withPreloading(PreloadAllModules)   // précharge les lazy routes
    )
  ]
};

// article-detail.component.ts — avec withComponentInputBinding()
@Component({ ... })
export class ArticleDetailComponent {
  @Input() id!: string;  // injecté automatiquement depuis :id dans la route
}