Walktrought installing angular-gettext in ionic

Question

I'me trying to get angular-gettext to work in ionic. Could someone explain how to do that? There aren't any good explanations out there yet.

Answer 1

Even thought this question is quite old, I still could not recently find much information on how to adapt the angular-gettext Getting Started guide to an Ionic app. So here is how I did it with IonicV1 and German (de_DE) translations:

---

1) Install angular-gettext

I added the <script> section in the main html file index.html and added the angular module to app.run.js.

---

2) Annotate translations

One thing not highlighted enough in the official guide is that you can annotate strings in the JS file by using gettextContent.getString('English text') String 'English text' will be picked automatically for translation, similarly to what happen to tags marked with directive translate.

---

3) Extract strings

I used angular-gettext-cli as I didn't use grunt in my Ionic project. From your project root, create a folder i18n and then:

angular-gettext-cli --files './app/**/*.+(js|html)' --exclude '**/*.spec.js' --dest './i18n/extract.pot' --marker-name i18n 

---

4) Translate strings

The guide perfectly explains how to use Poedit to build a .po file out of the .pot template.

---

5) Compile translations

angular-gettext-cli helps building translation.js containing all translated text in Javascript format.

angular-gettext-cli --compile --files './i18n/de_DE_t.po' --dest './app/translations.js' --format javascript --module gettext

This will create a file translations.js containing all translations.

---

6) Enable transaltions (not part of angular-gettext guide)

I then added translations.js created at previous step to index.html:

<script src="app/translations.js"></script>

And concluded by specifying the language to be used in app.run.js:

var appLanguage = window.navigator.language || window.navigator.userLanguage;
gettextCatalog.setCurrentLanguage(appLanguage);