Réponse rapide
Pour localiser une application Angular en 2026, utilisez le paquet natif @angular/localize. C'est la méthode recommandée par l'équipe Angular car elle effectue la traduction au moment de la compilation (build-time), ce qui donne un bundle sans impact sur les performances d'exécution (Zero-Runtime Overhead).
Introduction
La localisation (i18n) dans Angular a beaucoup évolué. Alors que des bibliothèques externes comme ngx-translate étaient la norme, Angular fournit maintenant une solution robuste et performante via @angular/localize.
Dans ce guide, nous couvrirons tout ce que vous devez savoir pour configurer une application Angular multilingue prête pour la production en 2026.
Pourquoi @angular/localize ?
- Performance : Les traductions sont fusionnées lors du build. Votre application ne passe pas de temps à analyser les traductions au démarrage.
- Fiabilité : Supporté officiellement par Google.
- Standards : Utilise le format standard de l'industrie pour les messages.
Étape 1 : Installation
Ajoutez le paquet de localisation à votre projet :
Terminalng add @angular/localize
Cette commande configurera automatiquement votre angular.json et installera les paquets nécessaires.
Étape 2 : Marquage du texte pour la traduction
Utilisez l'attribut i18n dans vos templates HTML.
HTML<h1 i18n="@@homePageTitle">Bienvenue sur notre application</h1> <p i18n="@@homeDescription">Ceci est une description localisée.</p>
Pour le texte dans le code TypeScript, utilisez la fonction balisée $localize.
TypeScriptconst titre = $localize`:@@pageTitle:Ma Page Titre`;
Étape 3 : Extraction des traductions
Vous devez extraire ces chaînes marquées dans un fichier de traduction source.
Terminalng extract-i18n --output-path src/locale
Cela génère un fichier (généralement XLF ou JSON) contenant tous vos messages.
Étape 4 : Traduction
Copiez le fichier source pour chaque langue cible (par exemple, messages.fr.xlf, messages.es.xlf) et traduisez le contenu.
XML1<trans-unit id="homePageTitle"> 2 <source>Welcome to our app</source> 3 <target>Bienvenue sur notre application</target> 4</trans-unit>
Gestion des traductions avec IntlPull
La gestion manuelle des fichiers XLF/JSON peut devenir un cauchemar. IntlPull automatise ce flux de travail pour les développeurs Angular :
- Synchronisation : Poussez vos fichiers extraits vers IntlPull.
- Traduction IA : Obtenez instantanément des traductions de haute qualité pour toutes vos langues cibles.
- Pull : Récupérez les fichiers traduits prêts pour le build.
Terminalnpx @intlpullhq/cli push src/locale/messages.xlf
Configuration du Build
Configurez votre angular.json pour générer différentes versions de votre application pour chaque langue.
JSON1"i18n": { 2 "sourceLocale": "en", 3 "locales": { 4 "fr": "src/locale/messages.fr.xlf", 5 "es": "src/locale/messages.es.xlf" 6 } 7}
Ensuite, lors de l'exécution de ng build, Angular créera des dossiers séparés (dist/my-app/en/, dist/my-app/fr/) pour chaque langue.
FAQ
Quelle est la différence avec ngx-translate ?
ngx-translate fonctionne à l'exécution (runtime), ce qui permet de changer de langue dynamiquement mais impacte les performances. @angular/localize crée des builds séparés, ce qui est plus performant et meilleur pour le SEO.
Comment gérer le changement de langue ?
Avec @angular/localize, changer de langue signifie naviguer vers une URL différente (par exemple, de /en/ à /fr/). C'est la méthode recommandée pour le SEO.
Résumé
L'utilisation de @angular/localize est la meilleure pratique pour l'i18n Angular en 2026. Combinez-le avec IntlPull pour éliminer la douleur de la gestion des fichiers de traduction XML/JSON.
