Angular : ajouter dynamiquement l'en-tête Accept-Language avec un HttpInterceptor

Pourquoi un interceptor ?

Centraliser certaines logiques (authentification, logs, headers, erreurs) dans un HttpInterceptor permet :

• Une meilleure séparation des responsabilités
• Moins de duplication dans les services
• Une architecture plus testable et évolutive

Le besoin : transmettre la langue de l'utilisateur au backend

Imagine une app Angular multilingue. Le backend a besoin de connaître la langue de l’utilisateur pour retourner du contenu localisé (traductions, formats, etc.). La convention est d'utiliser l’en-tête Accept-Language.

Étape 1 — Créons l'interceptor

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { TranslocoService } from '@@jsverse/transloco'; // ou use de LOCALE_ID directement

export const languageHeaderInterceptor: HttpInterceptorFn = (req, next) => {
  const currentLang = inject(TranslocoService).getActiveLang();

  const cloned = req.clone({
    setHeaders: {
      'Accept-Language': currentLang,
    },
  });

  return next(cloned);
};

Étape 2 — Enregistrer l'interceptor

import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { languageHeaderInterceptor } from './interceptors/language.interceptor';

bootstrapApplication(App, {
  providers: [
    provideHttpClient(withInterceptors([languageHeaderInterceptor])),
  ],
});

Variante : injecter LOCALE_ID à la place de Transloco

import { LOCALE_ID, inject } from '@angular/core';

export const languageHeaderInterceptor: HttpInterceptorFn = (req, next) => {
  const locale = inject(LOCALE_ID); // 'fr', 'en', etc.
  return next(
  req.clone({ setHeaders: { 'Accept-Language': locale } })
  );
};

Résultat attendu

✅ Chaque requête HTTP envoie automatiquement :

GET /api/produits
Accept-Language: fr

Conclusion

Le HttpInterceptor est vraiment pratique pour centraliser des actions à effectuer sur les requêtes HTTP ou leur réponse. Un autre use case courant serait de centraliser la gestion des erreurs HTTP.

👉🏼Envie d'aller plus loin en Angular ? Rejoins-nous https://pim.ms/gjvOEOb