Ionic2 & Angular's official i18n

[trakhimenok]

Short description of the problem:

It's not clear if it is possible to use official Angular 2 way to internationalize Ionic 2 apps.

My understanding it is not currently supported as AoT version of Angular 2 i18n requires to:

pre-build a separate application package for each language

what is not the case with Ionic 2 build process as far as I understand.

What behavior are you expecting?

I expect Ionic 2 docs to have a page/section dedicate to i18n & l10n.
Ideally Ionic should support the i18n process provided by Angular 2.

Angular 2 libraries for translation:

• https://angular.io/docs/ts/latest/cookbook/i18n.html - official
• https://github.com/ocombe/ng2-translate - most popular alternative as far as I know

Which Ionic Version? 2.x

[jgw96]

Hello, thanks for using Ionic! We actually recommend that devs use ng2-translate for internationalization in Ionic 2 apps. We have docs on this here and the docs on the ng2-translate repo should help with details.

[trakhimenok]

@jgw96 thanks for pointing out the link to docs. Maybe it make sense to add to the page keywords "i18n" and "l10n" so it is searchable?

[alexciesielski]

Could you please clarify why you recommend an unofficial library over the official one?
Will there be support for Angular 2's official i18n library?

[knvpk]

AS of now ng2-trnslate doesn't support the pluralization and contexts.

[lentschi]

Sorry for my necromancy - but I think this is still a valid issue and my findings might at least serve as a warning for others...:

I decided to use angular's official i18n lib instead of ng2-translate, which would have been recommended by @jgw96 (I only read this issue after developing my app.)

During development this worked fine and I encountered no problems. However when trying to build an optimized version of my app for deployment, which doesn't take ages to start (by using the --prod switch for ionic cordova run), I found out that language switching suddenly stopped working.

The reason for this, is that for production optimization ionic's app-scripts use AOT, and the new angular i18n doesn't support switching the locale with AOT - s. https://angular.io/docs/ts/latest/cookbook/i18n.html#!#aot

There is a lot of discussion about this on angular forums... But as far as I understand: Angular's position is not going to change soon in that regard. To still be able to create language switchers, the forums currently recommend to create a landing page or implement server redirect logic.

However these approaches will hardly work for a mobile app... (Currently the AOT compilation for ionic seems to be hardcoded NOT to use angular's i18n at all.) Does anyone have a suggestion (a sample app, coming by this issue or at least a hint) or will I have to rewrite everything to work with ng2-translate?

[trakhimenok]

@lentschi, I feel your pain.

Theoretically you can hack Ionic and ship multiple bundles of the app 1 per language. But that is hard, unpredictable and dangerous path.

I would advise to go with ng2-translate that was renamed to ngx-translate.

It may be boring and time consuming but a predictable way.

I've done that with my https://DebtsTracker.io/ and it works fine.

[lentschi]

@astec
Thanks for your quick reply!

Yes, I was afraid, that this would be the answer...
Shipping multiple bundles would be the angular way - as far as I understand it - and I would have no problem doing that if it were possible. It's a pity that ionic doesn't seem to support it.

[trakhimenok]

Multiple bundles - increased app size. May be ok for your app but probably is not as a general solution.

[lentschi]

Hmm... Probably.... But I guess the minified app js wouldn't take up much space, even if translated into a lot of languages.
What takes up most is dependencies and plugins.

[lentschi]

However - you're right - I don't think that was angular's wisest design choice - that's why there's so much discussion about it.

[yosigolan]

Hey.
i know the issue is closed but i wanted to say that i agree with @lentschi and the issue should be revised. angular have official way of translation and even-though there are plugins doing it differently i think ionic should stick with the official way. angular official translation is much quicker and align with commercial translation standards. ionic already support AOT so all that left to support is loading the app htmls from different path (supporting multiple bundles).

hope this issue will be resolved sometime...

[mebibou]

Also it seems ngx-translate is limited in some regards, like it does not work with multiple modules and sub-modules. I don't know if the angular i18n works as I haven't tried, but Ionic should probably be compatible with more generic translation solutions

[ciekawy]

also what about the i18next?

[yosigolan]

Hey.
wanted to mention that not with angular 5 there is a strong push to the official angular 18n framework with many new feature. are there any considerations to adopt it?

[ghost]

Video on the futur of i18n in Angular (Angular connect) https://youtu.be/DWet6RvhHWI?t=21m12s

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.