Documentación / Angular

i18n de Angular con ngx-translate, automatizado

Mueva el texto codificado de forma rígida en las plantillas de Angular a la tubería ngx-translate, con control de flujo, enlaces y atributos aria manejados, para aplicaciones independientes y NgModule, versiones anteriores de Angular incluidas.

Cómo funciona

Las plantillas (.html y template: en línea) se convierten en {{ 'key' | translate }}, los atributos [placeholder]="'key' | translate" ([attr.aria-label] para aria), y las cadenas en los enlaces ('key' | translate).

Las plantillas se analizan con el propio compilador de Angular, por lo que se entienden @if, @for, *ngIf y las plantillas en línea. Los elementos que utilizan el atributo i18n propio de Angular se dejan a él.

Una frase alrededor de un enlace o texto en negrita sigue siendo un mensaje: un <i18n-t> generado lo renderiza, con cada elemento en un <ng-template i18nSlot>. Antes de Angular 14, viene como un I18nTModule.

Los componentes declarados en un NgModule (cualquier componente antes de Angular 19 sin standalone: true) obtienen TranslateModule a través del módulo que los declara.

ngx-translate no tiene plurales, por lo que {{ n }} {{ n === 1 ? 'order' : 'orders' }} elige su clave con una tubería generada: ('orders.left_' + (n | pluralForm)) | translate: { count: n }, con _one, _few, _other… por idioma.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

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

<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 · despué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"
  }
}

Lo que añade la configuración

La primera ejecución configura @ngx-translate/core si el proyecto aún no lo tiene:

@ngx-translate/core, en la versión que su Angular soporta
src/app/i18n.ts que agrupa cada idioma (sin cargador HTTP)
provideI18n() en app.config.ts (un I18nModule en app.module.ts antes de Angular 16), y la tubería en cada componente independiente o NgModule declarante

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

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

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.