Avoir plusieurs langues sur votre site

Avoir plusieurs langues sur votre site vous permet de toucher un public plus large et rend votre application plus attractive.

Il existe deux manières d’implémenter l’internationalisation dans Angular : ng-translate et i18n. Les deux peuvent fonctionner, mais il existe des différences que je vais expliquer.

Ng-translate

C’est une bibliothèque d’internationalisation pour Angular.

Quelques particularités :

Elle permet de gérer du contenu dynamique ou statique dans un service, une directive ou un pipe.
Un avantage intéressant est que vous pouvez faire des traductions instantanées sans recharger toute l’application.

L’idée derrière la bibliothèque est de fournir un support i18n jusqu’à ce qu’Angular puisse le supporter entièrement. Elle sera ensuite dépréciée.

i18n

i18n est un outil d’internationalisation intégré à Angular, qui permet de créer des applications multilingues.
Puisqu’il est intégré, vous n’avez rien à installer pour commencer à l’utiliser.

Ng-translate vs i18n

Ng-translate utilise le JIT via les bindings, ce qui signifie que la traduction peut changer à tout moment. L’inconvénient est que les bindings consomment beaucoup de mémoire.
Angular i18n vous oblige à compiler l’application pour chaque langue, mais il est possible de faire une compilation "live".
Vous devez générer des dist différents pour chaque langue, puis vous pouvez basculer après le déploiement complet.
Angular ne supporte i18n que dans vos templates.
Angular supporte les formats XLIFF ou XMB (XML), alors que Ng-translate supporte JSON par défaut, mais vous pouvez créer votre propre loader pour tout format.
Angular i18n supporte les expressions ICU (pluriels et textes alternatifs), ce que Ng-translate ne fait pas.
Ng-translate s’exécute à l’exécution et ne supporte que le HTML classique, tandis qu’Angular i18n supporte les placeholders HTML incluant du code Angular.
L’API de Ng-translate est plus complète grâce à l’exécution runtime (observables, events…), ce qu’Angular i18n n’a pas, mais ce n’est pas nécessaire puisque les traductions ne changent pas à l’exécution.
Angular i18n est également meilleur pour le SEO.

Ajouter i18n dans Angular

Pas besoin d’installer quoi que ce soit, i18n est intégré à Angular.

Pour commencer à traduire du texte, il faut marquer les balises avec l’attribut i18n :

<h1 i18n>An article</h1>

L’attribut i18n aide les outils Angular à localiser et extraire le texte statique à traduire lors de la compilation.

On peut ajouter description et meaning pour améliorer la précision de la traduction :

<h1 i18n="[meaning]|[description]@@[id]">
  An exemple
  <h1>
    Example :
    <h1 i18n="set an article|tile of an article on the website@@articleTitle">
      An article
      <h1></h1>
    </h1>
  </h1>
</h1>

Une fois que tous les textes à traduire sont marqués, vous pouvez générer le fichier de traduction.

Angular CLI permet de générer le fichier i18n avec la commande :

ng xi18n --output-path assets/i18n

La commande génère un fichier de traduction de base messages.xlf dans le dossier assets/i18n.

Selon la langue vers laquelle vous souhaitez traduire votre site, renommez le fichier : messages.lang.xlf.

Chaque balise <trans-unit> représente un texte marqué.

Tous les textes à traduire se trouvent dans la balise <source> :

<source>texte</source>
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="4237d2e6410a632fbdef1f8e6e5fcd24bf012810" datatype="html">
<source>Jeu</source>
<target>Game</target>
<context-group purpose="location">
<context context-type="sourcefile">app/navbar/navbar.component.html</context>
<context context-type="linenumber">12</context>
</context-group>
</trans-unit>
<trans-unit

Compilation

Si vous souhaitez compiler votre application dans la langue ciblée, vous devez éditer le fichier angular.json.

Sous la section architect.build.configurations, ajoutez une nouvelle configuration pour la langue cible.

Définissez un bloc de configuration pour chaque langue que vous souhaitez traduire.

Compiler dans une langue spécifique

Pour compiler dans une langue spécifiée et générer un dossier dist, exécutez la commande :

ng build --configuration=lang

Servir l’application

Pour pouvoir utiliser différentes langues avec i18n, vous devez disposer de différents packages de distribution, c’est-à-dire un pour chaque langue.

Différentes stratégies peuvent être utilisées pour servir l’application :

Détection de la langue côté serveur (via locale)
Paramètres dans l’URL

La méthode des paramètres URL permet de changer la langue côté client.

Dans ce tutoriel, nous allons nous concentrer sur la méthode des paramètres URL.

Tout d’abord, vous devez ajouter un raccourci pour chaque langue dans les configurations de angular.json sous la section serve.

Pour servir l’application dans une langue spécifique, tapez la commande :

ng serve --configuration=lang

Votre application s’ouvrira alors sur :

http://localhost:4200/lang

C’est donc essentiellement la méthode pour configurer votre application Angular afin d’utiliser i18n.