Angular i18n mit ngx-translate, automatisiert

Funktionsweise

Vorlagen (.html-Dateien und Inline-template:) werden zu {{ 'key' | translate }}, Attribute [placeholder]="'key' | translate" ([attr.aria-label] für Aria) und Zeichenketten in Bindungen ('key' | translate).

Vorlagen werden mit Angulars eigenem Compiler analysiert, sodass @if, @for, *ngIf und Inline-Vorlagen verstanden werden. Elemente, die Angulars eigenes i18n-Attribut verwenden, werden diesem überlassen.

Ein Satz um einen Link oder Fettdruck bleibt eine Nachricht: ein generiertes <i18n-t> rendert ihn, mit jedem Element in einer <ng-template i18nSlot>. Vor Angular 14 kommt es als I18nTModule.

Komponenten, die in einem NgModule deklariert sind (jede Komponente vor Angular 19 ohne standalone: true), erhalten TranslateModule über das Modul, das sie deklariert.

ngx-translate hat keine Pluralformen, daher wählt {{ n }} {{ n === 1 ? 'order' : 'orders' }} seinen Schlüssel mit einer generierten Pipe: ('orders.left_' + (n | pluralForm)) | translate: { count: n }, mit _one, _few, _other… pro Sprache.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

<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" />

<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" />

{
  "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"
  }
}

Was das Setup hinzufügt

Der erste Durchlauf richtet @ngx-translate/core ein, falls das Projekt es noch nicht hat:

• @ngx-translate/core, in der Version, die Ihr Angular unterstützt
• src/app/i18n.ts, das jedes Gebietsschema bündelt (kein HTTP-Loader)
• provideI18n() in app.config.ts (ein I18nModule in app.module.ts vor Angular 16) und die Pipe in jeder eigenständigen Komponente oder deklarierenden NgModule

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.