🗣️ MULTI LANGUES 🗣️
SOMMAIRE
I18N
Pour offrir une expérience utilisateur de premier plan, l'internationalisation (i18n) est une étape incontournable. Elle permet non seulement de toucher un public mondial mais aussi de séparer proprement le contenu textuel de la logique métier.
Installer les librairies suivantes =>
Example :pnpm add @ngx-translate/core@latest @ngx-translate/http-loader@latestInternationalisation avec NGX-Translate
L'implémentation choisie repose sur NGX-Translate, la bibliothèque de référence pour Angular. Elle permet de charger des fichiers de traduction de manière asynchrone et de basculer d'une langue à l'autre dynamiquement sans recharger l'application.
Pourquoi cette solution ?
- Flexibilité : les traductions sont stockées dans des fichiers JSON simples (
fr.json,en.json). - Performance : chargement à la demande (Lazy Loading) des fichiers de langue via HTTP.
- Simplicité : utilisation de Pipes (
| translate) ou de Directives dans les templates HTML.
EXTENSION VSCODE
Pour un confort de développement absolu, l'extension I18n Ally a été implémenté dans ce projet. Elle permet de voir la traduction directement dans le code (à la place de la clé brute) et d'éditer les JSON sans changer de fichier.
Configuration :
Copier la configuration du fichier settings.json (dossier .vscode à la racine) du projet pour que l'extension détecte correctement les fichiers et la syntaxe Angular.
Fonctionnalités clés activées dans ce projet :
Visualisation Inline : Afficher la traduction française directement dans le code HTML/TS à la place de la clé brute (ex: affiche "
Accueil" au lieu deHOME.TITLE).Indicateurs d'état : Signaler visuellement si une traduction est manquante dans une des langues.
Édition Contextuelle : Permettre de modifier le texte (
en.jsonetfr.json) directement depuis une info-bulle dans le code, sans ouvrir les fichiers JSON.
💡 Une documentation complète est disponible dans le fichier .vscode/settings.json et ici... =>