Routage

import { ApplicationConfig, Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet, Routes, provideRouter } from '@angular/router';

@Component({ selector: 'app-accueil', template: '<h1>Accueil</h1>' })
export class Accueil {}

@Component({ selector: 'app-liste-produits', template: '<h1>Produits</h1>' })
export class ListeProduits {}

@Component({ selector: 'app-page-introuvable', template: '<h1>Page introuvable</h1>' })
export class PageIntrouvable {}

export const routes: Routes = [
  // Un chemin ne commence jamais par une barre oblique. title devient le
  // titre du document une fois la navigation terminée.
  { path: '', component: Accueil, title: 'Accueil' },
  { path: 'produits', component: ListeProduits, title: 'Produits' },
  // Le routeur retient la première route qui correspond, dans l'ordre du
  // tableau : '**' accepte toute URL, il vient donc en dernier.
  { path: '**', component: PageIntrouvable, title: 'Page introuvable' },
];

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <nav>
      <!-- '/' est le début de toutes les URL : sans exact, ce lien serait
           actif sur chaque page. -->
      <a routerLink="/" routerLinkActive="actif" [routerLinkActiveOptions]="{ exact: true }"
        >Accueil</a
      >
      <a routerLink="/produits" routerLinkActive="actif">Produits</a>
    </nav>
    <!-- Le composant de la route active est inséré juste après cette balise. -->
    <router-outlet />
  `,
})
export class App {}

// web/src/app/app.routes.ts de ce site (commentaire d'origine abrégé)
import { Routes } from '@angular/router';
import { TOPICS } from './catalogue/catalogue';

// Une route par cours rédigé, dérivée du catalogue : ajouter un cours au
// catalogue suffit à le rendre joignable.
const coursRoutes: Routes = TOPICS.flatMap((topic) =>
  topic.cours
    .filter((cours) => cours.charger !== undefined)
    .map((cours) => ({
      path: `${topic.slug}/${cours.slug}`,
      title: `${cours.titre} — ${topic.nom}`,
      data: { topic: topic.slug, cours: cours.slug },
      loadComponent: cours.charger!,
    })),
);

export const routes: Routes = [
  {
    path: '',
    title: 'Cours',
    loadComponent: () => import('./catalogue/catalogue-page').then((m) => m.CataloguePage),
  },
  ...coursRoutes,
  { path: '**', redirectTo: '' },
];

// ---- app.routes.ts ----
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    // Un import() dynamique : le bundler en fait un fichier à part, téléchargé
    // à la première navigation vers la route, puis gardé en mémoire.
    loadComponent: () => import('./accueil/accueil').then((m) => m.Accueil),
  },
  {
    path: 'compte',
    // compte.ts se termine par « export default class Compte » : le then
    // devient inutile.
    loadComponent: () => import('./compte/compte'),
  },
  {
    path: 'admin',
    // Toute une branche : ses routes et tout ce qu'elles importent.
    loadChildren: () => import('./admin/admin.routes').then((m) => m.ROUTES_ADMIN),
  },
];

// ---- admin/admin.routes.ts ----
// TableauDeBord et Utilisateurs sont des composants ordinaires ; Statistiques
// est un service @Injectable() sans providedIn.
import { Routes } from '@angular/router';
import { Statistiques } from './statistiques';
import { TableauDeBord } from './tableau-de-bord';
import { Utilisateurs } from './utilisateurs';

export const ROUTES_ADMIN: Routes = [
  {
    path: '',
    // Un injecteur propre à la branche : Statistiques n'existe que sous
    // /admin, et son code voyage dans le même fichier différé.
    providers: [Statistiques],
    children: [
      { path: '', component: TableauDeBord },
      { path: 'utilisateurs', component: Utilisateurs },
    ],
  },
];

// ---- compte/compte.ts ----
import { Component, signal } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';

@Component({ selector: 'app-compte', template: '<h1>Mon compte</h1>' })
export default class Compte {
  readonly modifie = signal(false);
}

// Rangé à côté du composant qu'il protège...
export const quitterCompteGuard: CanDeactivateFn<Compte> = (compte) =>
  !compte.modifie() || confirm('Quitter sans enregistrer ?');

// ---- app.routes.ts ----
import { Routes } from '@angular/router';
// ...et importé ici pour être déclaré sur la route. Ce fichier fait partie du
// bundle initial : cet import y fait entrer compte.ts tout entier.
import { quitterCompteGuard } from './compte/compte';

export const routes: Routes = [
  {
    path: 'compte',
    loadComponent: () => import('./compte/compte'),
    canDeactivate: [quitterCompteGuard],
  },
];

// ---- compte/compte.ts : le composant seul ----
import { Component, signal } from '@angular/core';

@Component({ selector: 'app-compte', template: '<h1>Mon compte</h1>' })
export default class Compte {
  readonly modifie = signal(false);
}

// ---- compte/compte.guard.ts ----
import { CanDeactivateFn } from '@angular/router';
// import type est effacé à la compilation : aucun lien ne subsiste entre les
// fichiers JavaScript produits.
import type Compte from './compte';

export const quitterCompteGuard: CanDeactivateFn<Compte> = (compte) =>
  !compte.modifie() || confirm('Quitter sans enregistrer ?');

// ---- app.routes.ts ----
import { Routes } from '@angular/router';
import { quitterCompteGuard } from './compte/compte.guard';

export const routes: Routes = [
  {
    path: 'compte',
    loadComponent: () => import('./compte/compte'),
    canDeactivate: [quitterCompteGuard],
  },
];

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

// Route : { path: 'produits/:id', component: FicheProduit }
@Component({
  selector: 'app-fiche-produit',
  imports: [RouterLink],
  template: `
    <h1>Produit {{ id }}</h1>
    <a [routerLink]="['/produits', id + 1]">Produit suivant</a>
  `,
})
export class FicheProduit {
  // Lu une fois, à la construction. De /produits/1 à /produits/2, seule la
  // valeur du paramètre change : le routeur garde la même instance, et
  // l'URL dit 2 quand l'écran dit toujours 1.
  protected readonly id = Number(inject(ActivatedRoute).snapshot.paramMap.get('id'));
}

import { ApplicationConfig, Component, input, numberAttribute } from '@angular/core';
import { RouterLink, Routes, provideRouter, withComponentInputBinding } from '@angular/router';

@Component({
  selector: 'app-fiche-produit',
  imports: [RouterLink],
  template: `
    <h1>Produit {{ id() }}</h1>
    @if (onglet() === 'avis') {
      <p>Avis des clients</p>
    }
    <a [routerLink]="['/produits', id() + 1]" [queryParams]="{ onglet: 'avis' }"
      >Produit suivant, ses avis</a
    >
  `,
})
export class FicheProduit {
  // :id de l'URL, réécrit à chaque navigation, y compris quand l'instance
  // est réutilisée. Il arrive en chaîne : numberAttribute le convertit.
  readonly id = input.required({ transform: numberAttribute });

  // ?onglet=avis. Absent de l'URL, il vaut undefined.
  readonly onglet = input<string>();
}

export const routes: Routes = [{ path: 'produits/:id', component: FicheProduit }];

export const appConfig: ApplicationConfig = {
  // Sans withComponentInputBinding, les entrées ne reçoivent rien de la route.
  providers: [provideRouter(routes, withComponentInputBinding())],
};

import { Injectable, inject, signal } from '@angular/core';
import { CanActivateFn, CanDeactivateFn, CanMatchFn, Router, Routes } from '@angular/router';

type Role = 'client' | 'admin';

@Injectable({ providedIn: 'root' })
export class Session {
  readonly utilisateur = signal<{ readonly nom: string; readonly role: Role } | null>(null);
}

// Un guard est une fonction. Le routeur l'appelle dans un contexte
// d'injection : inject() y fonctionne comme dans un constructeur.
export const connecteGuard: CanActivateFn = (_route, etat) => {
  if (inject(Session).utilisateur() !== null) {
    return true;
  }
  // Rediriger, c'est rendre une UrlTree : la navigation en cours est
  // remplacée par une autre, sans appel à navigate().
  return inject(Router).createUrlTree(['/connexion'], { queryParams: { retour: etat.url } });
};

// Une fabrique : le paramètre remplace ce qu'une classe aurait lu dans data.
export const aLeRole =
  (role: Role): CanMatchFn =>
  () =>
    inject(Session).utilisateur()?.role === role;

// Le guard reçoit l'instance du composant qu'on quitte.
export interface AvecBrouillon {
  aUnBrouillon(): boolean;
}

export const brouillonGuard: CanDeactivateFn<AvecBrouillon> = (composant) =>
  !composant.aUnBrouillon() || confirm('Quitter sans enregistrer le brouillon ?');

// Chaque fichier importé ci-dessous exporte par défaut un composant (ou,
// pour admin.routes, un tableau de routes).
export const routes: Routes = [
  { path: 'connexion', loadComponent: () => import('./connexion') },
  {
    path: 'compte',
    loadComponent: () => import('./compte'),
    canActivate: [connecteGuard],
    canDeactivate: [brouillonGuard],
  },
  // Refusée par canMatch, la route est ignorée comme si elle n'existait pas,
  // et le routeur essaie la suivante.
  { path: 'admin', loadChildren: () => import('./admin.routes'), canMatch: [aLeRole('admin')] },
  { path: '**', loadComponent: () => import('./introuvable') },
];

import { inject } from '@angular/core';
import { CanActivateFn, Routes } from '@angular/router';
import { Session } from './guards';

const estAdmin: CanActivateFn = () => inject(Session).utilisateur()?.role === 'admin';

export const routes: Routes = [
  // canActivate s'exécute après la reconnaissance des routes, et la
  // reconnaissance d'une branche différée passe par son chargement : pour un
  // client, le fichier de l'administration est téléchargé, puis refusé.
  { path: 'admin', loadChildren: () => import('./admin.routes'), canActivate: [estAdmin] },
  { path: '**', loadComponent: () => import('./introuvable') },
];

import { inject } from '@angular/core';
import { CanMatchFn, Routes } from '@angular/router';
import { Session } from './guards';

const estAdmin: CanMatchFn = () => inject(Session).utilisateur()?.role === 'admin';

export const routes: Routes = [
  // canMatch s'exécute avant : refusée, la route n'est pas retenue, rien
  // n'est téléchargé, et /admin tombe sur la page introuvable.
  { path: 'admin', loadChildren: () => import('./admin.routes'), canMatch: [estAdmin] },
  { path: '**', loadComponent: () => import('./introuvable') },
];

import { Injectable, inject } from '@angular/core';
import { CanActivate, Router, Routes, UrlTree, mapToCanActivate } from '@angular/router';
import { Session } from './guards';

// L'ancienne forme : une classe injectable, que le routeur retrouve par son jeton.
@Injectable({ providedIn: 'root' })
export class ConnecteGuard implements CanActivate {
  private readonly session = inject(Session);
  private readonly router = inject(Router);

  canActivate(): boolean | UrlTree {
    return this.session.utilisateur() !== null || this.router.parseUrl('/connexion');
  }
}

// Déprécié : la classe elle-même dans le tableau. Cela fonctionne encore.
export const avant: Routes = [
  { path: 'compte', loadComponent: () => import('./compte'), canActivate: [ConnecteGuard] },
];

// Migration sans réécrire la classe : une fonction qui la délègue.
export const apres: Routes = [
  {
    path: 'compte',
    loadComponent: () => import('./compte'),
    canActivate: [() => inject(ConnecteGuard).canActivate()],
  },
];

// Le même emballage, fourni par le routeur.
export const apresBis: Routes = [
  {
    path: 'compte',
    loadComponent: () => import('./compte'),
    canActivate: mapToCanActivate([ConnecteGuard]),
  },
];

import { Injectable } from '@angular/core';

export interface Produit {
  readonly id: number;
  readonly nom: string;
}

@Injectable({ providedIn: 'root' })
export class Catalogue {
  private readonly produits: readonly Produit[] = [
    { id: 1, nom: 'Clavier' },
    { id: 2, nom: 'Souris' },
  ];

  // Un appel réseau, simulé : la réponse arrive 300 ms plus tard.
  async trouver(id: number): Promise<Produit | undefined> {
    await new Promise((fin) => setTimeout(fin, 300));
    return this.produits.find((produit) => produit.id === id);
  }
}

import { inject } from '@angular/core';
import { RedirectCommand, ResolveFn, Router } from '@angular/router';
import { Catalogue, Produit } from './catalogue';

export const produitResolver: ResolveFn<Produit> = async (route) => {
  const produit = await inject(Catalogue).trouver(Number(route.paramMap.get('id')));

  // Après await, le contexte d'injection n'existe plus. Un produit connu ne
  // passe pas ici ; un produit inconnu appelle inject(), qui lève NG0203 :
  // au lieu de la redirection prévue, la navigation échoue.
  return produit ?? new RedirectCommand(inject(Router).parseUrl('/introuvable'));
};

import { ApplicationConfig, Component, inject, input } from '@angular/core';
import {
  RedirectCommand,
  ResolveFn,
  Router,
  Routes,
  provideRouter,
  withComponentInputBinding,
} from '@angular/router';
import { Catalogue, Produit } from './catalogue';

export const produitResolver: ResolveFn<Produit> = async (route) => {
  // Tout ce qui s'injecte s'injecte avant le premier await.
  const catalogue = inject(Catalogue);
  const router = inject(Router);

  const produit = await catalogue.trouver(Number(route.paramMap.get('id')));

  // Introuvable : une redirection plutôt qu'une page vide.
  return produit ?? new RedirectCommand(router.parseUrl('/introuvable'));
};

@Component({ selector: 'app-fiche-produit', template: '<h1>{{ produit().nom }}</h1>' })
export class FicheProduit {
  // La clé de resolve devient le nom de l'entrée (withComponentInputBinding).
  // Le composant ne voit jamais d'état de chargement : il n'existe qu'une
  // fois la donnée arrivée.
  readonly produit = input.required<Produit>();
}

@Component({ selector: 'app-introuvable', template: '<h1>Produit introuvable</h1>' })
export class Introuvable {}

export const routes: Routes = [
  { path: 'produits/:id', component: FicheProduit, resolve: { produit: produitResolver } },
  { path: 'introuvable', component: Introuvable },
];

export const appConfig: ApplicationConfig = {
  // Sans withComponentInputBinding, l'entrée produit ne reçoit rien.
  providers: [provideRouter(routes, withComponentInputBinding())],
};

import { Component, computed, inject } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    @if (navigationEnCours()) {
      <p role="status">Chargement…</p>
    }
    <router-outlet />
  `,
})
export class App {
  private readonly router = inject(Router);

  // currentNavigation est un signal (Angular 20.2) : la navigation en cours,
  // ou null. Pendant qu'un resolver attend, c'est le seul signe visible.
  protected readonly navigationEnCours = computed(() => this.router.currentNavigation() !== null);
}

import { Component, inject, input, numberAttribute, resource } from '@angular/core';
import { Catalogue } from './catalogue';

// Route : { path: 'produits/:id', component: FicheProduit }, sans resolve.
@Component({
  selector: 'app-fiche-produit',
  template: `
    @if (produit.isLoading()) {
      <p>Chargement…</p>
    } @else if (produit.error()) {
      <p>Le catalogue ne répond pas.</p>
    } @else if (produit.value(); as trouve) {
      <h1>{{ trouve.nom }}</h1>
    } @else {
      <h1>Produit introuvable</h1>
    }
  `,
})
export class FicheProduit {
  readonly id = input.required({ transform: numberAttribute });
  private readonly catalogue = inject(Catalogue);

  // La navigation se termine tout de suite ; le chargement suit id().
  protected readonly produit = resource({
    params: () => this.id(),
    loader: ({ params }) => this.catalogue.trouver(params),
  });
}

import { Component, Injectable, inject, signal } from '@angular/core';
import { Router, Routes } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class Session {
  readonly role = signal<'client' | 'admin' | null>(null);
}

@Component({ selector: 'app-page', template: '<h1>Page</h1>' })
export class Page {}

export const routes: Routes = [
  // 'full' : la route ne correspond qu'à l'URL vide. Sans pathMatch, '' serait
  // le préfixe de toutes les URL ; le mode développement refuse cette
  // configuration dès la création du routeur (NG04014).
  { path: '', pathMatch: 'full', redirectTo: 'produits' },

  // Une décision. La fonction reçoit ce que le routeur sait déjà de la route
  // (params, queryParams, fragment, data…) et s'exécute dans un contexte
  // d'injection. Elle rend une chaîne ou une UrlTree, directement ou de façon
  // asynchrone (promesse, observable).
  {
    path: 'mon-espace',
    pathMatch: 'full',
    redirectTo: () => {
      const role = inject(Session).role();
      if (role === null) {
        return inject(Router).createUrlTree(['/connexion'], {
          queryParams: { retour: '/mon-espace' },
        });
      }
      return role === 'admin' ? '/admin' : '/compte';
    },
  },

  { path: 'produits', component: Page },
  { path: 'connexion', component: Page },
  { path: 'compte', component: Page },
  { path: 'admin', component: Page },
];

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

@Component({ selector: 'app-fiche-produit', template: '<h1>Fiche</h1>' })
export class FicheProduit {}

export const routes: Routes = [
  // L'ancienne adresse d'une fiche, encore présente dans des favoris et des
  // courriels. :ref est recopié ; le reste ne l'est pas :
  // /fiche/42?onglet=avis#photos devient /produits/42.
  { path: 'fiche/:ref', redirectTo: '/produits/:ref' },
  { path: 'produits/:ref', component: FicheProduit },
];

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

@Component({ selector: 'app-fiche-produit', template: '<h1>Fiche</h1>' })
export class FicheProduit {}

export const routes: Routes = [
  {
    path: 'fiche/:ref',
    // La fonction reconstruit l'URL entière : /fiche/42?onglet=avis#photos
    // devient /produits/42?onglet=avis#photos.
    redirectTo: ({ params, queryParams, fragment }) =>
      inject(Router).createUrlTree(['/produits', params['ref']], {
        queryParams,
        fragment: fragment ?? undefined,
      }),
  },
  { path: 'produits/:ref', component: FicheProduit },
];

// web/src/app/app.config.ts de ce site (commentaire d'origine reformulé)
import {
  ApplicationConfig,
  inject,
  provideAppInitializer,
  provideZonelessChangeDetection,
} from '@angular/core';
import { ViewportScroller } from '@angular/common';
import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(
      routes,
      withComponentInputBinding(),
      withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }),
    ),
    // ViewportScroller défile vers des coordonnées calculées, ce qui ignore
    // le scroll-margin-top du CSS : un décalage de 24 px le remplace pour
    // tout défilement vers une ancre.
    provideAppInitializer(() => inject(ViewportScroller).setOffset([0, 24])),
  ],
};

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

@Component({
  selector: 'app-sommaire',
  template: `
    <!-- index.html déclare <base href="/"> : le navigateur résout #guards
         contre cette base, pas contre la page. Sur /angular/routing, le lien
         vise /#guards, une autre adresse : l'application entière se recharge
         sur l'accueil. -->
    <a href="#guards">Guards</a>
  `,
})
export class Sommaire {}

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

@Component({
  selector: 'app-sommaire',
  imports: [RouterLink],
  template: `
    <!-- [] désigne la route courante : le lien porte
         href="/angular/routing#guards", le clic passe par le routeur, et
         anchorScrolling fait défiler jusqu'à l'élément d'id guards. -->
    <a [routerLink]="[]" fragment="guards">Guards</a>
  `,
})
export class Sommaire {}