Angular i18n

Le système i18n natif d'Angular marque les chaînes traduisibles dans les templates, les extrait vers des fichiers XLIFF et compile des builds séparés par locale.

Marquer les chaînes dans les templates

<!-- Texte statique -->
<h1 i18n="@@app.title">Album Store</h1>

<!-- Avec signification et description -->
<p i18n="Titre de page|Affiché sur la page d'accueil@@home.heading">
  Bienvenue dans la boutique
</p>

<!-- Attribut -->
<input i18n-placeholder="@@search.placeholder" placeholder="Rechercher…" />

<!-- ID stable (@@id recommandé pour la ré-extraction) -->
<button i18n="@@cart.add">Ajouter au panier</button>

Extraire les messages

ng extract-i18n --format xlf2 --output-path src/locale

src/locale/messages.xlf généré :

<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en-US">
  <file id="ngi18n" original="ng:localize">
    <unit id="app.title">
      <segment>
        <source>Album Store</source>
      </segment>
    </unit>
  </file>
</xliff>

Traduire (français)

Copier et renommer :

cp src/locale/messages.xlf src/locale/messages.fr.xlf

Ajouter <target> dans chaque <segment> :

<unit id="app.title">
  <segment>
    <source>Album Store</source>
    <target>Boutique d'Albums</target>
  </segment>
</unit>

Pluriel et Select

<!-- Pluriel -->
<p i18n="@@cart.items">
  {itemCount, plural,
    =0 {Aucun article}
    =1 {1 article}
    other {{{itemCount}} articles}
  }
</p>

<!-- Select -->
<span i18n="@@format.type">
  {format, select,
    vinyl {Vinyle}
    cd {CD}
    other {Numérique}
  }
</span>

Traduction française pour le pluriel :

<unit id="cart.items">
  <segment>
    <source>{itemCount, plural, =0 {No items} =1 {1 item} other {{{itemCount}} items}}</source>
    <target>{itemCount, plural, =0 {Aucun article} =1 {1 article} other {{{itemCount}} articles}}</target>
  </segment>
</unit>

Configurer angular.json

{
  "projects": {
    "my-app": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf"
          }
        }
      },
      "architect": {
        "build": {
          "configurations": {
            "fr": { "localize": ["fr"] },
            "production": { "localize": true }
          }
        }
      }
    }
  }
}

Construire les bundles localisés

# Toutes les locales
ng build --localize

# Une seule locale
ng build --configuration=fr

Sortie :

dist/my-app/browser/
├── en-US/
└── fr/

Servir en développement (locale unique)

ng serve --configuration=fr

Points clés

Concept	Détails
Attribut i18n	Marque le contenu d'un élément pour la traduction
i18n-{attr}	Marque un attribut HTML
@@id	ID d'unité de traduction stable (recommandé)
Format XLIFF	XLF ou XLF2 (préférer XLF2)
ng extract-i18n	Génère le fichier de messages source
ng build --localize	Compile un bundle par locale