Comprendre l'ordre des routes dans Angular : éviter les pièges courants

Lorsqu’on configure le routage dans Angular, l’ordre des routes est crucial.

Une mauvaise organisation peut entraîner des redirections infinies, des pages inaccessibles ou des erreurs inattendues.

Pourquoi l’ordre des routes est-il important ?

Angular évalue les routes de haut en bas, dans l’ordre où elles sont déclarées. Dès qu’il trouve une correspondance, il s’arrête et applique la route.

L’exemple suivant est incorrect :

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }, // Problème : Intercepte TOUTES les routes !
  { path: 'home', component: HomeComponent }, // Jamais atteinte !
];

Problème : ‘**’ (wildcard) intercepte tout, y compris /home \==> Boucle de redirection !

autrement:
1. Tu vas sur /home
2. Angular lit les routes dans l’ordre :
- D’abord ‘ ‘ —> nematche pas
- Ensuite ’**’ —> MATCH ! ( car ‘**’ prend tout)
- Redirection vers /home ==> Boucle infinie

Règles d’organisation des routes

Règle n°1 : La route vide ‘ ‘ en premier

• Elle doit toujours être en haut pour gérer la racine (/).

• pathMatch : ‘full’ garantit que seule la route exacte ‘‘ est concernée.

{ path: '', redirectTo: '/home', pathMatch: 'full' }

Règles n°2 : Les routes spécifiques avant les wildcards

Les routes statique (/home, /login) doivent être déclarées avant ‘**’

{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },

Règle n°3 : Le wildcard ‘**’ toujours en dernier

Elle agit comme un “filet de sécurité” pour les routes inconnues

{ path: '**', component: NotFoundComponent } // Page 404
// ou
{ path: '**', redirectTo: '/home' } // Redirection alternative