Les Router Events dans Angular

Les Router Events sont des événements émis par le Router d'Angular qui nous permettent de suivre et réagir aux différentes étapes de la navigation dans notre application. C'est un peu comme avoir un GPS qui nous informe en temps réel de chaque étape de notre trajet !

Voici comment implémenter un suivi des événements de navigation :

navigation.service.ts

import { Injectable, signal } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
import { inject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NavigationService {
  private router = inject(Router);
  loading = signal(false);

  constructor() {
    this.router.events.subscribe((event: Event) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.loading.set(true);
          break;
        }
        case event instanceof NavigationEnd: {
          this.loading.set(false);
          break;
        }
        case event instanceof NavigationError: {
          this.loading.set(false);
          console.error('Erreur de navigation:', event);
          break;
        }
      }
    });
  }
}

app.component.ts

import { Component, inject } from '@angular/core';
import { NavigationService } from './navigation.service';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    @if (navigationService.loading()) {
      <div class="loading">Chargement en cours...</div>
    }
    <router-outlet />
  `,
  standalone: true,
  imports: [RouterOutlet]
})
export class AppComponent {
  navigationService = inject(NavigationService);
}

Attention à la performance

Ne vous abonnez aux Router Events que si c'est nécessaire. Trop d'observateurs peuvent impacter les performances de votre application.

Utilisation avec provideAppInitializer

Vous pouvez également utiliser les Router Events dès l'initialisation de votre application en utilisant provideAppInitializer. C'est particulièrement utile si vous devez mettre en place une surveillance des routes dès le démarrage de l'application.

app.config.ts

import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
import { provideRouter } from '@angular/router';
import { NavigationService } from './navigation.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAppInitializer(() => {
      const navigationService = inject(NavigationService);
      // Initialiser le service de navigation dès le démarrage
      navigationService.initialize();
    })
  ]
};

navigation.service.ts

@Injectable({
  providedIn: 'root'
})
export class NavigationService {
  private router = inject(Router);

  initialize() {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        // Logique d'initialisation personnalisée
        // Par exemple, sauvegarder l'historique de navigation
        this.saveNavigationHistory(event.urlAfterRedirects);
      }
    });
  }
}

Avantage

L'utilisation de provideAppInitializer garantit que votre logique de surveillance des routes est mise en place avant même que l'application ne commence à gérer les navigations utilisateur.

Cas d'utilisation courants

1. Afficher un loader global

this.router.events.subscribe((event: Event) => {
  if (event instanceof NavigationStart) {
    // Afficher le loader
    this.showLoader();
  }
});

2. Tracer les navigations

this.router.events.subscribe((event: Event) => {
  if (event instanceof NavigationEnd) {
    // Envoyer les données de navigation à un service d'analytics
    this.analyticsService.trackPageView({
      url: event.urlAfterRedirects
    });
  }
});

3. Gérer les erreurs de navigation

this.router.events.subscribe((event: Event) => {
  if (event instanceof NavigationError) {
    // Rediriger vers une page d'erreur
    this.router.navigate(['/error'], {
      queryParams: { message: event.error.message }
    });
  }
});

Les Router Events sont particulièrement utiles pour :

• Implémenter des indicateurs de chargement globaux
• Tracer la navigation des utilisateurs
• Gérer les erreurs de navigation de manière centralisée
• Exécuter des actions avant ou après la navigationd

Liste des événements de navigation

Voici tous les événements émis par le Router pendant une navigation :

Événement	Description
NavigationStart	Émis lorsque la navigation commence
RouteConfigLoadStart	Émis juste avant que le Router charge une configuration de route de manière lazy
RouteConfigLoadEnd	Émis après qu'une route a été chargée en lazy loading
RoutesRecognized	Émis quand le Router analyse l'URL et reconnaît les routes
GuardsCheckStart	Émis quand le Router commence la phase de vérification des Guards
ChildActivationStart	Émis quand le Router commence l'activation des routes enfants
ActivationStart	Émis quand le Router commence l'activation d'une route
GuardsCheckEnd	Émis quand le Router termine avec succès la phase de vérification des Guards
ResolveStart	Émis quand le Router commence la phase de résolution des données
ResolveEnd	Émis quand le Router termine avec succès la phase de résolution
ChildActivationEnd	Émis quand le Router termine l'activation des routes enfants
ActivationEnd	Émis quand le Router termine l'activation d'une route
NavigationEnd	Émis quand la navigation se termine avec succès
NavigationCancel	Émis quand la navigation est annulée (par exemple par un Guard retournant false)
NavigationError	Émis quand la navigation échoue à cause d'une erreur inattendue
Scroll	Émis lors d'un événement de défilement

Conseil d'utilisation

Pour déboguer la navigation, vous pouvez utiliser l'option withDebugTracing() dans la configuration du Router dans le fichier app.config.ts. Cela affichera tous ces événements dans la console du navigateur.

import { ApplicationConfig, provideRouter, withDebugTracing } from '@angular/core';
import { routes } from './app/app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withDebugTracing())
  ]
};