LG

Le système de traduction natif intégré à Angular.

Avantages :

• Pas de dépendances externes,
• Le texte est traduit en dur dans le code généré,
• On compile une fois, on génère un site par langue.

Inconvénient :

• On ne peut pas traduire des librairies, i18n Support in Angular Library Archive du 27/03/2019 le 22/08/2021
• On génère un site autonome par langue. Cela duplique les assets. Localizing your app Archive du 12.2.3 le 22/08/2021
• Il n'est que possible de générer la liste des textes à traduire. Il n'est pas possible de mettre à jour une liste des traductions. ng-xi18n: Merge/Update Existing Translations File (XLIFF) Archive du 02/06/2017 le 23/08/2021

npm i --save @angular/localize

Il faut activer les options localize et aot. Voir la i18n d'Angular.

Dans le code source, on met une langue par défaut (anglais par exemple) et la traduction dans le fichier .xlf.

Ajouter l'action extract-i18n dans la librairie qu'on souhaite traduire. ng xi18n not working for library Archive du 03/03/2020 le 23/08/2021

angular.json

{
  "projects": {
    "lib-library": {
      "architect": {
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-i18n:build"
          }
        }
      }
    },
    "app-main": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": "projects/app-main/src/locale/messages.fr.xlf"
        }
      },
      "architect": {
        "build": {
          "options": {
            "localize": true,
            "aot": true
          }
        }
      }
    }
  }
}

• Librairie

Il faut ajouter au fichier test.ts:

test.ts

/******************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular
 * templates.
 */
import '@angular/localize/init';

• Application

Il faut ajouter la même chose au fichier polyfills.ts:

polyfills.ts

/******************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular
 * templates.
 */
import '@angular/localize/init';

• .html

Il suffit d'ajouter un attribut i18n. Il est possible d'ajouter des catégories aux textes descriptifs.

<label for="width" i18n="input form|Foundation strip width">Width: </label>

• Extraction des données

ng extract-i18n --output-path ./projects/app-main/src/locale

S'il y a une librairie et une application, la traduction fusionne les textes de la librairie et de l'application.

• Traduire la langue

Copier le fichier généré dans ./projects/app-main/src/locale/messages.xlf.

En dessous de chaque <source>…</source>, ajouter la traduction <target>…</target>.

<source>Width: </source>
<target>Largeur : </target>

La traduction peut aussi gérer le binding :

<pre i18n="output form|Output of Meyerhof calculation">
Form Values: {{ result | json }}</pre>

<source>Form Values: <x id="INTERPOLATION"/></source>
<target>Résultats : <x id="INTERPOLATION"/></target>

L'inverse de @angular/localize.