Guides approfondis
Internationalisation

Travailler avec les fichiers de traduction

Après avoir préparé un composant pour la traduction, utilisez la commande extract-i18n de l'Angular CLI pour extraire le texte marqué du composant dans un fichier de langue source.

Le texte marqué comprend le texte marqué avec i18n, les attributs marqués avec i18n-attribut et le texte balisé avec $localize, comme décrit dans Préparer un composant pour la traduction.

Suivez les étapes ci-dessous pour créer et mettre à jour les fichiers de traduction de votre projet.

  1. Extrayez le fichier de langue source.
    1. Si vous le souhaitez, changez l'emplacement, le format et le nom.
  2. Copiez le fichier de langue source pour créer un fichier de traduction pour chaque langue.
  3. Traduisez chaque fichier de traduction.
  4. Traduisez séparément les pluriels et les expressions alternatives.
    1. Traduisez les pluriels.
    2. Traduisez les expressions alternatives.
    3. Traduisez les expressions imbriquées.

Extraire le fichier de langue source

Pour extraire le fichier de langue source, effectuez les actions suivantes.

  1. Ouvrez une fenêtre de terminal.
  2. Placez-vous dans le répertoire racine de votre projet.
  3. Exécutez la commande CLI suivante.
ng extract-i18n

La commande extract-i18n crée un fichier de langue source nommé messages.xlf dans le répertoire racine de votre projet. Pour en savoir plus sur le XML Localization Interchange File Format (XLIFF, version 1.2), consultez XLIFF.

Utilisez les options suivantes de la commande extract-i18n pour changer l'emplacement, le format et le nom du fichier de langue source.

Option de commande Détails
--format Définit le format du fichier de sortie
--out-file Définit le nom du fichier de sortie
--output-path Définit le chemin du répertoire de sortie

Changer l'emplacement du fichier de langue source

Pour créer un fichier dans le répertoire src/locale, spécifiez le chemin de sortie en option.

Exemple extract-i18n --output-path

L'exemple suivant spécifie le chemin de sortie en option.

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

Changer le format du fichier de langue source

La commande extract-i18n crée des fichiers dans les formats de traduction suivants.

Format de traduction Détails Extension de fichier
ARB Application Resource Bundle .arb
JSON JavaScript Object Notation .json
XLIFF 1.2 XML Localization Interchange File Format, version 1.2 .xlf
XLIFF 2 XML Localization Interchange File Format, version 2 .xlf
XMB XML Message Bundle .xmb (.xtb)

Spécifiez explicitement le format de traduction avec l'option de commande --format.

Utile : Le format XMB génère des fichiers de langue source .xmb, mais utilise des fichiers de traduction .xtb.

Exemple extract-i18n --format

L'exemple suivant présente plusieurs formats de traduction.

ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb

Changer le nom du fichier de langue source

Pour changer le nom du fichier de langue source généré par l'outil d'extraction, utilisez l'option de commande --out-file.

Exemple extract-i18n --out-file

L'exemple suivant montre comment nommer le fichier de sortie.

ng extract-i18n --out-file source.xlf

Créer un fichier de traduction pour chaque langue

Pour créer un fichier de traduction pour une locale ou une langue, effectuez les actions suivantes.

  1. Extrayez le fichier de langue source.

  2. Faites une copie du fichier de langue source pour créer un fichier de traduction pour chaque langue.

  3. Renommez le fichier de traduction pour y ajouter la locale.

    messages.xlf --> messages.{locale}.xlf

  4. Créez un nouveau répertoire nommé locale à la racine de votre projet.

    src/locale

  5. Déplacez le fichier de traduction dans le nouveau répertoire.

  6. Envoyez le fichier de traduction à votre traducteur.

  7. Répétez les étapes ci-dessus pour chaque langue que vous voulez ajouter à votre application.

Exemple extract-i18n pour le français

Par exemple, pour créer un fichier de traduction français, effectuez les actions suivantes.

  1. Exécutez la commande extract-i18n.
  2. Faites une copie du fichier de langue source messages.xlf.
  3. Renommez la copie en messages.fr.xlf pour la traduction en français (fr).
  4. Déplacez le fichier de traduction fr dans le répertoire src/locale.
  5. Envoyez le fichier de traduction fr au traducteur.

Traduire chaque fichier de traduction

À moins que vous ne maîtrisiez la langue et ayez le temps de modifier les traductions, vous suivrez probablement les étapes suivantes.

  1. Envoyez chaque fichier de traduction à un traducteur.
  2. Le traducteur utilise un éditeur de fichiers XLIFF pour effectuer les actions suivantes.
    1. Créer la traduction.
    2. Modifier la traduction.

Exemple de processus de traduction pour le français

Pour illustrer le processus, examinez le fichier messages.fr.xlf de l'exemple d'application Angular internationalisée. L'exemple d'application Angular internationalisée inclut une traduction française que vous pouvez modifier sans éditeur XLIFF particulier ni connaissance du français.

Les actions suivantes décrivent le processus de traduction pour le français.

  1. Ouvrez messages.fr.xlf et trouvez le premier élément <trans-unit>. Il s'agit d'une unité de traduction, aussi appelée nœud de texte, qui représente la traduction de la balise de salutation <h1> marquée précédemment avec l'attribut i18n.

    src/locale/messages.fr.xlf (<trans-unit>)

    <trans-unit id="introductionHeader" datatype="html">
  <source>Hello i18n!</source>
  <note priority="1" from="description">An introduction header for this sample</note>
  <note priority="1" from="meaning">User welcome</note>
</trans-unit>

    id="introductionHeader" est un identifiant personnalisé, mais sans le préfixe @@ requis dans le HTML source.

  2. Dupliquez l'élément <source>... </source> dans le nœud de texte, renommez-le en target, puis remplacez son contenu par le texte français.

    src/locale/messages.fr.xlf (<trans-unit>, après traduction)

    <trans-unit id="introductionHeader" datatype="html">
  <source>Hello i18n!</source>
  <target>Bonjour i18n !</target>
  <note priority="1" from="description">An introduction header for this sample</note>
  <note priority="1" from="meaning">User welcome</note>
</trans-unit>

    Dans une traduction plus complexe, les informations et le contexte fournis par les éléments de description et de signification vous aident à choisir les bons mots pour la traduction.

  3. Traduisez les autres nœuds de texte. L'exemple suivant montre comment traduire.

    src/locale/messages.fr.xlf (<trans-unit>)

    <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
  <source>I don&apos;t output any element</source>
  <target>Je n'affiche aucun élément</target>
</trans-unit>
<trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
  <source>Angular logo</source>
  <target>Logo d'Angular</target>
</trans-unit>

Important : Ne modifiez pas les identifiants des unités de traduction. Chaque attribut id est généré par Angular et dépend du contenu du texte du composant et de la signification attribuée.

Si vous modifiez le texte ou la signification, l'attribut id change. Pour en savoir plus sur la gestion des modifications de texte et des identifiants, consultez identifiants personnalisés.

Traduire les pluriels

Ajoutez ou supprimez des cas de pluriel selon les besoins de chaque langue.

Utile : Pour les règles de pluriel des langues, consultez les règles de pluriel du CLDR.

Exemple minute plural

Pour traduire un plural, traduisez les valeurs de correspondance du format ICU.

  • just now
  • one minute ago
  • <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago

L'exemple suivant montre comment traduire.

src/locale/messages.fr.xlf (<trans-unit>)

<trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
</trans-unit>

Traduire les expressions alternatives

Angular extrait aussi les expressions ICU alternatives select sous forme d'unités de traduction distinctes.

Exemple gender select

L'exemple suivant montre une expression ICU select dans le template du composant.

app.component.html

<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>

Dans cet exemple, Angular extrait l'expression en deux unités de traduction. La première contient le texte situé hors de la clause select et utilise un placeholder pour select (<x id="ICU">) :

src/locale/messages.fr.xlf (<trans-unit>)

<trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
  <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
  <target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
</trans-unit>

Important : Lorsque vous traduisez le texte, déplacez le placeholder si nécessaire, mais ne le supprimez pas. Si vous supprimez le placeholder, l'expression ICU est supprimée de votre application traduite.

L'exemple suivant montre la seconde unité de traduction, qui contient la clause select.

src/locale/messages.fr.xlf (<trans-unit>)

<trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
  <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
  <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
</trans-unit>

L'exemple suivant montre les deux unités de traduction une fois la traduction terminée.

src/locale/messages.fr.xlf (<trans-unit>)

<trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
  <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
  <target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
  <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
  <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
</trans-unit>

Traduire les expressions imbriquées

Angular traite une expression imbriquée de la même manière qu'une expression alternative. Angular extrait l'expression en deux unités de traduction.

Exemple de plural imbriqué

L'exemple suivant montre la première unité de traduction, qui contient le texte situé hors de l'expression imbriquée.

src/locale/messages.fr.xlf (<trans-unit>)

<trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
  <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
  <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
</trans-unit>

L'exemple suivant montre la seconde unité de traduction, qui contient l'expression imbriquée complète.

src/locale/messages.fr.xlf (<trans-unit>)

<trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
</trans-unit>

L'exemple suivant montre les deux unités de traduction après traduction.

src/locale/messages.fr.xlf (<trans-unit>)

<trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
  <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
  <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
</trans-unit>

Et ensuite ?