Aller au contenu principal

Externalisation des libellés via i18n

Traductions (externalisation des libellés)​

Utilisation de la librairie ngx-translate (l'outil proposé par Angular est plus compliqué à mettre en place pour une utilisation simple à un langage - voir docs).

Utilisation :

Docs

Un fichier de traduction en français est présent sous src/locales/fr-FR.json.
Dans le template d'un composant, on peut l'utiliser en tant que Pipe, Directive ou Attribut d'un élément => il faudrait utiliser la même chose partout.

<div>{{ 'HELLO' | translate }}</div>

On peut mettre des balises html dedans, il faudra utiliser dans ce cas innerHtml

<div [innerHTML]="'HELLO' | translate"></div>

Sur la partie typescript, on appellera le service.

Traductions​

Organisation des "messages" externalisés (entrées du menu, messages, libellés, ...).
Tous les messages de l'application devraient s'y retrouver.

  • menu du bandeau supérieur sous la clé HEADER (ex: HEADER.BTN_LOGIN )
  • menu latéral sous la clé SIDE_MENU (ex: SIDE_MENU.ITEM_EVENTS)
  • messages communs (ex: erreur par défaut Erreur Technique) sous la clé COMMON
  • messages/labels du module Shared sous la clé SHARED (ex: SHARED.DATATABLE.EMPTY_TABLE / SHARED.FORM.VALIDATION.REQUIRED )
  • messages des pages sous leurs clés, idéalement avec un nom de module (ex: ADMIN.EVENTS.XXX => les libellés de la page des évènements)
  • groupement des messages d'un formulaire sous une même clé FORM (ex: LOGIN.FORM.EMAIL.LABEL)
  • titre d'une page, définir une fois, à utiliser à deux endroits :

    • titre principal h1 d'une page

    • module de routing pour le titre de l'onglet (traduit grâce au TranslatedTitleStrategy )

      {
              path: 'login',
              //...
              title: 'LOGIN.TITLE',
      },

  • éviter de construire dynamiquement des clés référençant les messages pour faciliter la détection des chaînes inutilisées (voir extension vscode Lingua)

Extension recommandée​

Lingua​

Il est possible d'installer l'extension Lingua qui permet d'obtenir un aperçu du message directement dans le html. Il faudra alors configurer un fichier .lingua qui indique ou se trouve le fichier de traduction.

L'extension contient quelques commandes permettant la configuration et la manipulation (voir doc de l'extension).

Lingua example

Configuration​

Lancer la commande de VSCode

Lingua: select your default language => renseigner fr-FR

Ce qui devrait configurer dans votre fichier de settings :

// dans vos settings.json
"lingua.defaultLanguage": "fr-FR"

Placé dans le fichier src/locales/fr-FR.json, lancez la commande :

Lingua: set file as language file => renseigner fr-FR

Ce qui devrait configurer dans votre fichier .lingua :

// dans le fichier .lingua à la racine du projet
{
"translationFiles": [
    {
      "lang": "fr-FR",
      "uri": "vasco-front/src/locales/fr-FR.json"
    }
  ]
}

Analyse des traductions​

Lingua: Analyze translation usage => retourne un rapport avec notamment les chaînes non utilisées afin de faire le ménage (s'assurer que ces clés n'ont pas été générées dynamiquement...).