Angular
Angular Routing

Redirections et Erreurs 404

Il est essentiel de guider l'utilisateur lorsqu'il arrive sur la page d'accueil ou lorsqu'il tape une adresse qui n'existe pas (erreur 404). Angular gère cela très simplement !

Gérer les chemins par défaut et inconnus

1. La configuration des routes app.routes.ts

On utilise redirectTo pour envoyer l'utilisateur vers une autre page, et le chemin spécial ** (wildcard) pour capturer toutes les URL inconnues.

⚠️ Attention : La route ** doit toujours être placée tout à la fin de votre liste de routes !

export const routes: Routes = [
  { 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' // Indique qu'il faut que le chemin soit exactement vide (localhost:4200/)
  },
  { 
    path: 'home', 
    component: HomeComponent 
  },
  // ... autres routes ...

  { 
    path: '**', // Le double astérisque attrape tout ce qui n'a pas été trouvé au-dessus
    component: NotFoundComponent 
  }
];

2. Le composant 404 not-found.component.ts

C'est un composant tout à fait classique qui s'affichera quand l'URL ne correspond à rien.

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

@Component({
  selector: 'app-not-found',
  template: `
    <div style="text-align: center; padding-top: 50px;">
      <h1>Erreur 404</h1>
      <p>Oups ! Cette page n'existe pas.</p>
      <a routerLink="/">Retour à l'accueil</a>
    </div>
  `
})
export class NotFoundComponent {}