Configuration routeur Angular : Routes, Lazy Loading, et Guards

Navigation Single-Page Application

Dans Angular, le Router (depuis @angular/router) active navigation SPA via routes URL. Le terme « bootstrap router » fait référence à configuration routeur pendant bootstrap app via RouterModule.forRoot().

Configuration basique

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Fonctionnalités clés

• Routes nommées : Basées chemin (ex: /home), pas hash. Nécessite réécriture serveur pour deep links.
• Lazy Loading : Charger modules fonctionnalités à la demande :
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
• Route Guards : CanActivate, CanActivateChild, CanDeactivate, CanLoad, Resolve — pour auth, permissions, préchargement données, changements non sauvegardés.
• Routes enfants : <router-outlet> imbriqués pour layouts.
• Paramètres route & Query params : /user/:id (params), /search?q=term (query). Accès via ActivatedRoute.

Intégration Bootstrap

Importer AppRoutingModule dans AppModule ; routeur s'initialise pendant bootstrap app, écoutant changements URL navigateur via stratégie Location (PathLocationStrategy défaut).