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é, pas de pipe,
• On compile une fois mais 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 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
• Il n'est pas possible de changer la langue sans changer de page HTML,

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>

Site web

L'inverse de @angular/localize. C'est donc une dépendance externe à Angular.

Avantages :

• Un seul site dont la langue est changeable sans recharger,
• On peut avoir un fichier de traduction distinct par librairie et par application Loading Multiple file from a directory Archive du 16/08/2016 le 24/08/2021

Inconvénient :

• Comme c'est une dépendance externe, on ne profite pas d'une intégration profonde des avantages du compilateur,
• Dépendance externe,
• Le texte est traduit à la volée. Avant la conversion, le texte est manquant. Cela peut donc réduire l'expérience utilisateur,
• Nécessite de définir l'utilisation d'un pipe pour chaque composant.

npm i --save @ngx-translate/core

Il n'y a besoin de rien.

Un exemple simple : How to internationalize (i18n) your Angular application? Archive du 02/04/2019 le 09/10/2021

Un autre exemple plus complet avec uniquement une application: Internationalizing your Angular app Archive du 20/08/2019 le 02/10/2021

Exemple bien détaillé avec une librairie et une application: Translate Angular >=4 with ngx-translate and multiple modules Archive du 09/08/2017 le 24/08/2021

• Librairie

Il faut exporter le module de traduction. @ngx-translate/core - SharedModule Archive du 28/05/2021 le 24/08/2021

lib-jessica/src/lib/lib-jessica.module.ts

import { TranslateModule } from '@ngx-translate/core';
 
@NgModule({
  imports: [..., TranslateModule],
  exports: [
    ...,
    TranslateModule
  ]
})

• Application

app-main/src/app/app.component.spec.ts

import { TranslateService } from '@ngx-translate/core';
 
export class AppComponent {
  ...
 
  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');
  }
}

app-main/src/app/util/translate/multi-translate-http-loader.ts

import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { forkJoin, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
 
export class MultiTranslateHttpLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    public resources: { prefix: string; suffix: string }[] = [
      {
        prefix: './assets/i18n/',
        suffix: '.json'
      }
    ]
  ) {}
 
  public getTranslation(lang: string): Observable<unknown> {
    return forkJoin(
      this.resources.map((config) => {
        return this.http.get(`${config.prefix}${lang}${config.suffix}`);
      })
    ).pipe(
      map((response) => {
        return response.reduce((a, b) => {
          return Object.assign(a, b);
        });
      })
    );
  }
}

app-main/src/app/app.module.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 
import { MultiTranslateHttpLoader } from './util/translate/multi-translate-http-loader';
 
export function createTranslateLoader(http: HttpClient): TranslateLoader {
  return new MultiTranslateHttpLoader(http, [
    { prefix: './assets/i18n/', suffix: '.json' },
    { prefix: './assets/i18n/library-', suffix: '.json' }
  ]);
}
 
@NgModule({
  ...,
  imports: [
    ...,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      defaultLanguage: 'en'
    })
  ],
  ...
})
...

Pour éviter de devoir charger toutes les langues possibles, il faut charger dynamiquement les locales.

import { registerLocaleData } from '@angular/common';
 
const locale = await import(
  /* webpackInclude: /(en|fr)\.js$/ */
  '@angular/common/locales/' + selectedLang
);
registerLocaleData(locale.default, selectedLang);
translate.use(selectedLang);

Ici, translate est TranslateService.

L'utilisation de webpackInclude permet de ne pas charger toutes les langues mais uniquement celles supportées.

Dynamic Import of Locales in Angular Archive du 14/11/2018 le 10/10/2021

• HTML

{{ 'HOME.TITLE' | translate }}

• Traduction

app-main/src/assets/i18n/en.json

{
  "HOME": {
    "TITLE": "Calculator for Meherhof foundation!"
  }
}

ngx-translate how to test components Archive du 09/11/2019 le 24/08/2021

How to fix ngx-translate error when running tests Archive du 02/10/2019 le 24/08/2021

Pour les tests unitaires (pas end-to-end), il n'est généralement pas nécessaire de charger la librairie. Avantage : gain de temps. Inconvénient, l'aspect graphique ne sera pas conforme.

Dans le composant principal de l'application :

app-main/src/app/app.component.spec.ts

import {
  TranslateFakeLoader,
  TranslateLoader,
  TranslateModule
} from '@ngx-translate/core';
 
describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        ...,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useClass: TranslateFakeLoader
          }
        })
      ],
      ...

Dans chaque composant de l'application, on utilise le pipe de traduction de la librairie :

app-main/src/app/ui/main/main.component.spec.ts

import { TranslateMockPipe } from 'lib-library';
 
describe('MainComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        ...,
        TranslateMockPipe
      ]
    }).compileComponents();
  });

Dans chaque composant de la librairie, on utilise le même pipe de traduction :

lib-jessica/src/lib/xxx.component.spec.ts

import { TranslateMockPipe } from '../../../util/translation/translate-mock.pipe';
 
describe('FoundationStripFormComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      ...,
      declarations: [..., TranslateMockPipe]
    }).compileComponents();
  });

lib-library/src/lib/translate-mock.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'translate'
})
export class TranslateMockPipe implements PipeTransform {
  public name = 'translate';
 
  public transform(query: string): string {
    return query;
  }
}

projects/lib-jessica/src/public-api.ts

export * from './lib/util/translation/translate-mock.pipe';

Site web

C'est une librairie JavaScript (compatible TypeScript via @types) pour convertir un nombre en texte et un texte en nombre en respectant des locales précises.

Les données de localisation viennent d'un paquet npm cldr-data qui utilise les données du consortium Unicode. Ces données viennent en doublon avec le pipe “nombre” de @ngx-translate mais il faudra l'accepter.

La librairie est simple à utiliser.

Ci-dessous, un exemple pour convertir un nombre dans une certaine langue vers une autre langue.

La particularité ici est l'utilisation du lazy load pour ne charger dynamiquement que les deux langues nécessaire.

Il est nécessaire d'installer les paquets globalize et @types/globalize.

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "cldr": ["./projects/app-main/node_modules/cldrjs/dist/cldr"],
      "cldr/*": ["./projects/app-main/node_modules/cldrjs/dist/cldr/*"],
      "globalize/*": [
        "./projects/app-main/node_modules/globalize/dist/globalize/*"
      ],
      ...
    }
  },
  ...
}

import likelySubtags from 'cldr-data/supplemental/likelySubtags.json';
import numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
 
import * as globalize from 'globalize';
import 'globalize/number';
 
globalize.load([likelySubtags, numberingSystems]);
 
const cldrLocale = await import(
  /* webpackInclude: /main.(en|fr).numbers.json/ */
  'cldr-data/main/' + selectedLang + '/numbers.json'
);
 
globalize.load(cldrLocale.default);
 
let parserFrom = globalize.locale(from).numberParser();
let parserTo = globalize.locale(to).numberFormatter();

How to use Globalizejs Archive du 05/04/2019 le 10/10/2021

L'utilisation du commentaire webpackInclude permet à Angular de n'inclure dans la version finale du site que quelques locales.