Libellés

Internationaliser (i18n) avec Angular

Créez un nouveau composant :

ng g component components/component

Créez votre template HTML. Il faut ajouter i18n pour identifier l'élément à traduire.

<h1 i18n="@@title">Un super titre</h1>

@@title est l'identifiant de la traduction.

Générez un fichier de traduction :

ng xi18n

Vous pouvez aussi utiliser l'option --output-path pour enregistrer le fichier dans un dossier spécifique.

ng xi18n --output-path src/locale

Vous pouvez changer de nom du fichier avec l'option --out-file.

ng xi18n --out-file source.xlf

Le nom est messages par défaut.

Vous pouvez changer le format du fichier. XLIFF 1.2 (default) ou XLIFF 2 ou XML Message Bundle (XMB)

ng xi18n  --i18n-format=xlf
ng xi18n  --i18n-format=xlf2
ng xi18n  --i18n-format=xmb

Vous pouvez préciser la langue source de votre application en utilisant l'option --i18n-locale

ng xi18n --i18n-locale fr

Angular n'utilise pas la propriété source-language mais certains logiciels de traductions l'utilisent.

Enfin, vous pouvez bien sur cumuler toutes les options :

ng xi18n --output-path src/locale --out-file source.xlf --i18n-format=xlf --i18n-locale fr

Une fois le fichier généré, vous pouvez remarquer l'élément trans-unit. A l’intérieur, on trouve la balise source qui sera importante pour la suite.

Créez un fichier dans le même répertoire que le fichier généré en ajoutant l'extension du pays. Par exemple :

messages.en.xlf

Vous pouvez consulter la liste des extensions supportées sur le dépôt d'Angular

Copiez collez le contenu du fichier généré dans le nouveaux fichier. Ajoutez la balise target en dessous de la balise source.

Le fichier source ressemble à ça :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="fr" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="title" datatype="html">
        <source>Un super titre</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/component/component.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

Le fichier .en doit ressembler à ça :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="fr" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="title" datatype="html">
        <source>Un super titre</source>
 <target>A super title</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/component/component.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

Ensuite, il faut modifier le fichier angular.json pour que l'application prenne en compte la traduction.

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": { ... },
    "configurations": {
      "fr": {
        "aot": true,
        "outputPath": "dist/nom-du-projet-en/",
        "i18nFile": "messages.en.xlf",
        "i18nFormat": "xlf",
        "i18nLocale": "en",
        "i18nMissingTranslation": "error",
      }
// ...
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my-project:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "my-project:build:production"
    },
    "en": {
      "browserTarget": "nom-du-projet:build:fr"
    }
  }
},

Vous pouvez ensuite démarrer le serveur en utilisant une certaine configuration :

ng serve --configuration=en

Vous pouvez consulter la documentation i18n d'angular.

Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire