Ionic / Angular : internationalization App

25, August 2020 clemdesign

In a modern App using Ionic and/or Angular, you have to manage internationalization. But you doesn't know how to do it and what library to use. In this post, I talk about solutions.

There are 3 solutions to translate your App:

In this article, I will not give you details about implementation, but just give you the advantages and constraints of each solution.

Possibilities
Features Angular Internationalization Ngx-Translate Transloco
Translation of built-in values (dates, numbers, currencies) X - x
Translation in templates X X X
Translation in code - X X
Run-time language change - X X
Implementation
Features Angular Internationalization Ngx-Translate Transloco
Dependencies @angular/localize @ngx-translate/core / @ngx-translate/http-loader @ngneat/transloco
Compatibility - Angular 2 - 10 -
Operation of translation During build of App Through Angular module Through Angular module
Difficulty of implementation Hard Easy Easy
In details

After to implement each solutions, the native module of Angular is hard to understand and use. You shall know native development under Android and the translation files XLIFF and XMB to make more easy implementation. More over, translation of App is done during build. You can't translate dynamically your 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:

Previous Post Next Post

Add a comment