Ionic / Angular : gérer le multilingue

25 août 2020 clemdesign

Dans une application moderne Ionic et/ou Angular, il est d'usage de gérer le multilingue. Mais on ne sait pas forcément comment s'y prendre et quoi utiliser. Les réponses sont ici.

Il existe trois solutions pour traduire son application :

Dans cet article, je ne vais pas entrer dans les détails d'implémentation, mais juste aborder les avantages et inconvénients de chaque solution.

Possibilités de chaque librairie
Fonctionnalités Angular Internationalization Ngx-Translate Transloco
Traduction des valeurs intégrées (dates, nombres, devises) X - x
Traduction dans les templates X X X
Traduction dans le code - X X
Changement de langue au moment de l'exécution - X X
Implémentation
Fonctionnalités Angular Internationalization Ngx-Translate Transloco
Dépendances @angular/localize @ngx-translate/core / @ngx-translate/http-loader @ngneat/transloco
Compatibilité - Angular 2 - 10 -
Fonctionnement de la traduction A la compilation Via module Angular Via module Angular
Difficulté d'implémentation Difficile Facile Facile
En détails

Après avoir intégré les différentes solutions, je trouve que le module native d'Angular est assez compliqué à prendre en main et à comprendre. Il faut être familier du développement native sous Android et des fichiers de traductions XLIFF et XMB pour une meilleur compréhension. Cette librarie possède également une contrainte, et non des moindres: c'est à dire que la traduction se fait à la compilation : Vous ne pourrez pas traduire dynamiquement votre App.

Ngx-Translate est une librairie qui existe depuis la création d'Angular (la version 2) et a donc fait ses preuves. L'implémentation se fait facilement : on intègre un module et on utilise un service pour les traductions. Ces opérations sont donc familiées du développement avec Angular. Les traductions sont stockées dans des fichiers JSON, très simples à lire et modifier. La contrainte principale est que la librairie ne prend pas en charge la traduction des valeurs intégrées (dates, nombres, devises...)

Transcolo est le dernier-né, basé sur le système Ngx-Translate. Il a l'avantage de proposer l'intégration de plugins et une doc bien fournie. Le développement semble actif. On peut même traduire des dates et nombres avec le plugin Locale L10N. Bien qu'il soit nouveau, il est très prometteur et l'intégration se fait plus facilement que Ngx-Translate.

Guides

Si vous souhaitez intégrer une de ces solutions dans votre app, voici les guides :

Pour résumer

Aprés avoir testé l'intégration et les fonctionnalités des trois solutions, Transloco est sans-doute la plus aboutie et la plus simple en terme d'intégration. Le plus compliqué à prendre en main est le module native d'internationalisation d'Angular.

Vous pouvez avoir un aperçu des différentes intégrations dans le projet démo que j'ai initialisé : https://github.com/clemdesign/ionic-i18n.

Je vous dis à plus pour le prochain article. xD

Liens utiles:

Article précédent Article suivant

Ajouter un commentaire