🗣️ MULTI LANGUES 🗣️

SOMMAIRE

• I18N
• EXTENSION VSCODE
• NGX TRANSLATE
  • ESLINT NGX TRANSLATE LINTER
  • NGX TRANSLATE EXTRACT

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 =>

pnpm add @ngx-translate/core@latest @ngx-translate/http-loader@latest

🔗 Ngx Translate Documentation

Internationalisation 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

🔗 I18n Ally VSCode Extension

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 de HOME.TITLE).

• Indicateurs d'état :
  Signaler visuellement si une traduction est manquante dans une des langues.

• Édition Contextuelle :
  Permettre de modifier le texte (en.json et fr.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... =>

👀 I18n Ally Config Rules

NGX TRANSLATE

Gérer l'internationalisation (I18n) manuellement est source d'erreurs : oubli de clés, fautes de frappe ou traductions orphelines qui polluent le code. Pour garantir une qualité irréprochable et un coverage de 100% (y compris dans nos tests), ce flux a donc été automatisé grâce à deux outils puissants.

NGX TRANSLATE LINTER

🔗 Ngx Translate Linter Documentation

Le Gardien (ngx-translate-lint) :

Il agit comme un garde-fou strict dans notre CI/CD. Il vérifie que chaque clé utilisée dans le code (et les tests !) existe bien dans tous les fichiers de traduction (en.json, fr.json).

ESLINT NGX TRANSLATE LINTER

🔗 Ngx Translate Extract Documentation

L'Assistant (ngx-translate-extract) :

C'est l'outil de productivité. Il scanne automatiquement tout le projet pour extraire les clés et les injecter dans les fichiers JSON.
Fini le copier-coller manuel !!!