Générateur de routes Angular en ligne

Introduction au routing Angular

Le routing Angular est le mécanisme qui associe une URL à un composant. C'est lui qui permet de naviguer entre les pages d'une SPA (Single Page Application) sans rechargement complet du navigateur. Depuis Angular 14, le routing peut être configuré sans module (RouterModule) grâce aux composants standalone.

Le fichier central est app.routes.ts qui exporte un tableau Routes. Chaque objet dans ce tableau décrit une route avec ses propriétés.

Configurer les routes dans main.ts

En Angular 15+ avec l'approche standalone, la configuration du router se fait dans main.ts via provideRouter(). Plus besoin d'un AppRoutingModule.

// main.ts — Angular 15+ (approche standalone recommandée)
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withViewTransitions } from '@angular/router';
import { AppComponent } from './app/app.component';

// Importe les routes depuis le fichier dédié
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    // Fournit le router avec les routes et les transitions de vue
    provideRouter(routes, withViewTransitions())
  ]
}).catch(console.error);

Et voici le fichier app.routes.ts correspondant :

// app.routes.ts — Angular 15+ (standalone)
import { Routes } from '@angular/router';

// Tableau de routes exporté et consommé par provideRouter()
export const routes: Routes = [
  {
    // Route racine : redirige vers /home par défaut
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    // Page d'accueil chargée en lazy loading
    path: 'home',
    title: 'Accueil',
    loadComponent: () => import('./pages/home/home.component')
      .then(m => m.HomeComponent)
  },
  {
    // Route dynamique avec paramètre :id
    path: 'users/:id',
    title: 'Profil utilisateur',
    loadComponent: () => import('./pages/users/user-detail.component')
      .then(m => m.UserDetailComponent)
  },
  {
    // Route joker : capture toutes les URL non reconnues
    path: '**',
    loadComponent: () => import('./pages/not-found/not-found.component')
      .then(m => m.NotFoundComponent)
  }
];

// app-routing.module.ts — Angular 14 avec NgModule
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// Définition du tableau de routes
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    // Lazy loading via loadChildren pour le module
    loadChildren: () => import('./pages/home/home.module')
      .then(m => m.HomeModule)
  }
];

@NgModule({
  // forRoot() configure le router au niveau racine de l'application
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Pour afficher les composants routés dans votre template, ajoutez le composant <router-outlet> dans app.component.html :

<!-- app.component.html -->
<!-- La navbar est affichée en permanence -->
<app-navbar></app-navbar>

<!-- Le router-outlet remplace son contenu selon l'URL active -->
<router-outlet></router-outlet>

<!-- Le footer est affiché en permanence -->
<app-footer></app-footer>

Les guards Angular expliqués

Les guards sont des fonctions ou des classes qui décident si une navigation peut avoir lieu. Ils protègent des routes, empêchent la perte de données non sauvegardées ou pré-chargent des données avant l'affichage.

CanActivate — Protéger une route

C'est le guard le plus utilisé. Il vérifie si l'utilisateur a le droit d'accéder à une route (ex : est-il connecté ?).

// auth.guard.ts — Guard fonctionnel (Angular 15+)
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

// Guard sous forme de fonction — recommandé depuis Angular 15
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router      = inject(Router);

  // Si l'utilisateur est authentifié, on autorise la navigation
  if (authService.isAuthenticated()) {
    return true;
  }

  // Sinon on redirige vers la page de login
  // On mémorise l'URL tentée pour y revenir après connexion
  router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
  return false;
};

// Utilisation dans app.routes.ts
import { authGuard } from './core/guards/auth.guard';

export const routes: Routes = [
  {
    path: 'dashboard',
    title: 'Tableau de bord',
    loadComponent: () => import('./pages/dashboard/dashboard.component')
      .then(m => m.DashboardComponent),
    // Le guard est exécuté AVANT l'activation du composant
    canActivate: [authGuard]
  }
];

CanDeactivate — Empêcher la perte de données

Ce guard est utile pour les formulaires : il avertit l'utilisateur s'il tente de quitter une page avec des données non sauvegardées.

// can-deactivate.guard.ts
import { CanDeactivateFn } from '@angular/router';

// Interface que le composant doit implémenter
export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Promise<boolean>;
}

// Guard fonctionnel générique compatible avec tout composant
export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> =
  (component) => {
    // Vérifie si le composant autorise la navigation sortante
    if (component.canDeactivate) {
      return component.canDeactivate();
    }
    return true; // Par défaut, on autorise
  };

Lazy Loading : loadComponent vs loadChildren

Le lazy loading (chargement différé) permet de ne charger un composant ou un module qu'au moment où l'utilisateur navigue vers sa route. Cela réduit le bundle initial et accélère le premier chargement de l'application.

loadComponent — Standalone (Angular 14+)

Avec les composants standalone, chaque composant peut être chargé individuellement. C'est l'approche recommandée en Angular 15+.

// Avec loadComponent, chaque page est un chunk JS séparé
export const routes: Routes = [
  {
    path: 'products',
    title: 'Catalogue produits',
    // Webpack / Vite créera un chunk séparé : products-component.js
    loadComponent: () => import('./pages/products/products.component')
      .then(m => m.ProductsComponent)
  },
  {
    path: 'products/:id',
    title: 'Détail produit',
    // Chunk séparé : product-detail-component.js
    loadComponent: () => import('./pages/products/product-detail.component')
      .then(m => m.ProductDetailComponent)
  }
];

loadChildren — Grouper des routes (Angular 14)

Avec loadChildren, on charge un module entier ou un sous-tableau de routes en différé. Utile pour regrouper des routes liées (ex : tout le module /admin).

// Chargement lazy d'un sous-module complet (Angular 14 NgModule)
export const routes: Routes = [
  {
    path: 'admin',
    // Tout le module admin est chargé en un seul chunk
    loadChildren: () => import('./pages/admin/admin.module')
      .then(m => m.AdminModule)
  }
];

// Depuis Angular 15, on peut aussi utiliser loadChildren avec des Routes
export const routes: Routes = [
  {
    path: 'admin',
    // Charge un tableau de routes standalone en différé
    loadChildren: () => import('./pages/admin/admin.routes')
      .then(m => m.adminRoutes)
  }
];

Routes imbriquées (children)

Les routes imbriquées permettent d'avoir des sous-routes à l'intérieur d'une route parente. Le composant parent doit contenir un second <router-outlet> pour afficher les composants enfants.

// Exemple : section /admin avec sous-routes
export const routes: Routes = [
  {
    path: 'admin',
    // Composant parent chargé en lazy (contient un <router-outlet> interne)
    loadComponent: () => import('./pages/admin/admin-layout.component')
      .then(m => m.AdminLayoutComponent),
    canActivate: [authGuard], // Guard appliqué à toute la section admin
    children: [
      {
        // Route par défaut de /admin → redirige vers /admin/dashboard
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      },
      {
        // /admin/dashboard
        path: 'dashboard',
        title: 'Tableau de bord Admin',
        loadComponent: () => import('./pages/admin/dashboard/admin-dashboard.component')
          .then(m => m.AdminDashboardComponent)
      },
      {
        // /admin/users
        path: 'users',
        title: 'Gestion des utilisateurs',
        loadComponent: () => import('./pages/admin/users/admin-users.component')
          .then(m => m.AdminUsersComponent)
      },
      {
        // /admin/settings
        path: 'settings',
        title: 'Paramètres',
        loadComponent: () => import('./pages/admin/settings/admin-settings.component')
          .then(m => m.AdminSettingsComponent)
      }
    ]
  }
];

Le template du composant parent AdminLayoutComponent doit contenir <router-outlet> pour afficher le composant enfant actif :

<!-- admin-layout.component.html -->
<!-- Barre latérale commune à toutes les pages admin -->
<div class="admin-layout">
  <aside class="admin-sidebar">
    <nav>
      <a routerLink="/admin/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/admin/users" routerLinkActive="active">Utilisateurs</a>
      <a routerLink="/admin/settings" routerLinkActive="active">Paramètres</a>
    </nav>
  </aside>
  <main class="admin-content">
    <!-- Les composants enfants (/admin/dashboard, /admin/users...) s'affichent ici -->
    <router-outlet></router-outlet>
  </main>
</div>

Conclusion

Le système de routing Angular est l'un des plus complets du marché : lazy loading natif, guards fonctionnels, routes imbriquées, paramètres dynamiques et titres de page — tout est disponible en configuration déclarative dans un simple tableau Routes.

Utilisez ce générateur pour démarrer rapidement votre fichier app.routes.ts, puis ajustez les chemins d'import selon l'organisation de votre projet. Adoptez systématiquement le lazy loading pour toutes vos pages et les guards fonctionnels pour sécuriser la navigation côté client.