Docs / Angular

i18n Angular avec ngx-translate, automatisé

Déplacez le texte codé en dur dans les modèles Angular vers le pipe ngx-translate, avec la gestion du flux de contrôle, des liaisons et des attributs aria, pour les applications autonomes et NgModule, les anciennes versions d'Angular incluses.

Comment ça marche

Les modèles (.html et template: inline) deviennent {{ 'key' | translate }}, les attributs [placeholder]="'key' | translate" ([attr.aria-label] pour aria), et les chaînes dans les liaisons ('key' | translate).

Les modèles sont analysés avec le propre compilateur d'Angular, donc @if, @for, *ngIf et les modèles inline sont compris. Les éléments utilisant l'attribut i18n d'Angular lui sont laissés.

Une phrase autour d'un lien ou d'un texte en gras reste un seul message : un <i18n-t> généré le rend, avec chaque élément dans un <ng-template i18nSlot>. Avant Angular 14, il est livré sous forme de I18nTModule.

Les composants déclarés dans un NgModule (tout composant avant Angular 19 sans standalone: true) obtiennent TranslateModule via le module qui les déclare.

ngx-translate n'a pas de pluriels, donc {{ n }} {{ n === 1 ? 'order' : 'orders' }} choisit sa clé avec un pipe généré : ('orders.left_' + (n | pluralForm)) | translate: { count: n }, avec _one, _few, _other… par langue.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

src/app/orders/orders.component.html · avant

<h1>Your orders</h1>
@if (orders.length) {
  <p>Hi {{ user.name }}, your orders are on their way.</p>
} @else {
  <p>No orders yet. Read the <a routerLink="/shipping">shipping options</a> first.</p>
}
<input placeholder="Search orders" aria-label="Search" />

src/app/orders/orders.component.html · après

<h1>{{ 'orders.your_orders' | translate }}</h1>
@if (orders.length) {
  <p>{{ 'orders.hi_your_orders_are_on' | translate: { name: user.name } }}</p>
} @else {
  <p><i18n-t key="orders.no_orders_yet_read_the"><ng-template i18nSlot="a"><a routerLink="/shipping">{{ 'orders.shipping_options' | translate }}</a></ng-template></i18n-t></p>
}
<input [placeholder]="'orders.search_orders' | translate" [attr.aria-label]="'orders.search' | translate" />

locales/en.json

{
  "orders": {
    "your_orders": "Your orders",
    "hi_your_orders_are_on": "Hi {{name}}, your orders are on their way.",
    "shipping_options": "shipping options",
    "no_orders_yet_read_the": "No orders yet. Read the {{a}} first.",
    "search_orders": "Search orders",
    "search": "Search"
  }
}

Ce que l'installation ajoute

La première exécution configure @ngx-translate/core si le projet ne l'a pas encore :

@ngx-translate/core, dans la version que votre Angular prend en charge
src/app/i18n.ts regroupant chaque locale (pas de chargeur HTTP)
provideI18n() dans app.config.ts (un I18nModule dans app.module.ts avant Angular 16), et le pipe dans chaque composant autonome ou NgModule déclarant

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.