Angular
Angular Routing

Le Lazy Loading (Chargement à la demande)

Par défaut, Angular télécharge toute votre application lorsque l'utilisateur arrive sur votre site. Avec le Lazy Loading, on ne télécharge une page (ou une section) que lorsque l'utilisateur décide d'y aller. Résultat : une application beaucoup plus rapide au démarrage !

Exemple : Charger la section Admin à la demande

1. Définir la route principale app.routes.ts

Au lieu d'utiliser un simple component, on utilise loadChildren avec un import. Angular comprendra qu'il ne doit pas charger ce fichier tout de suite.

export const routes: Routes = [
  // ... autres routes ...

  { 
    path: 'admin', 
    // On télécharge le fichier admin.routes.ts uniquement si on va sur /admin
    loadChildren: () => import('./admin/admin.routes').then(m => m.routes) 
  }
];

2. Créer le fichier des routes enfants admin.routes.ts

Ce fichier contient toutes les routes spécifiques à la section admin. Il sera téléchargé à la demande.

import { Routes } from '@angular/router';
import { AdminComponent } from './admin.component';

export const routes: Routes = [
  { 
    path: '', // Correspond à "/admin"
    component: AdminComponent 
  }
];

3. Le composant classique admin.component.ts

C'est un composant Angular tout à fait normal. Il n'a même pas besoin de savoir qu'il est chargé en Lazy Loading !

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

@Component({
  selector: 'app-admin',
  template: `<h2>Bienvenue dans l'espace d'administration secret !</h2>`
})
export class AdminComponent {}
Astuce pour une seule page : Si vous n'avez pas besoin d'un fichier de routes complet mais juste d'un seul composant, vous pouvez utiliser loadComponent à la place de loadChildren pour un chargement encore plus direct !