Angular i18n: Performing Translations with Built-in Module

Implement Angular i18n with the built-in internationalization module! This article explains how to set up I18n, perform translations, and deploy the app.

#Lokalise #Angular #i18n

[matthieurioual]

honestly, probably the better translation tuto on angular i found. Thanks

[JedrekWie]

Content - tremendous! Voice/pronunciation - dramatic.

[iamjerryrobben]

@lokalise, How can localise library developed in angular and not the application, any tutorial on this would be really helpful.

[Lokalise]

Some important notes about this tutorial (please read those before asking questions):


* Please note that language switching is not really supposed to work in development environment (localhost) with AOT compiler. The idea is that you build multiple versions of the same app with AOT compiler and then deploy those to production. Language switcher will work on production, of course. This is a bit annoying but AOT compiler brings nice performance boost when comparing to JIT.

[curtisw]

wow angular requires you to build and deploy 2 separate apps just for localization sake? how is this considered acceptable?

[dewinchy]

I did not really understand how you're updating the ids and the translations. And how that .ru file is being generated. This is the way I'm understanding it: ng xi18n generates only the default messages.xlf. From there YOU have to copy all other translations on your own! And therefore if you're updating, ng xi18n will only be updating the messages.xlf again. So if you then compare messages.xlf and messages.ru.xlf, you have to look at all the translations, if they're correct, if the id is changed. Where the id is still the same, you don't have to do anything. Right?

[chil]

Hi, I am bit confused, I am building a SPA, I want to have a language switcher feature in my app, how do I do the localization with the routing? It's just like what you do to simply prepend the {{locale.code}} to the router link or do I need to add something to the routes in RouterModule? I am using Nginx as a proxy server, do I need to configure the Nginx as well?

[milex]

How come U did not make the same video for react since its much more popular library ? I am aware that u have article. Youtube video is just more searchable I supposed.

[kedarkulkarni]

when I'm running it in my localhost... the translation button doesn't work.. it works only after deploying ?

[yogeshsisodiya]

I18n route not working when angular application deploy normal hosting without firebase

[nyancat]

Dynamic switching language not working for localhost. Can you please helme

[dewinchy]

I'm using Angular 11, I get the message:

$ ng xi18n --output-path src/i18n
Warning: "ng xi18n" has been deprecated and will be removed in a future major version. Please use "ng extract-i18n" instead.
Ivy extraction not enabled but application is Ivy enabled. If the extraction fails, the `--ivy` flag will enable Ivy extraction.

So use "ng extract-i18n" instead!

[sakthisan]

dynamic switch language not working localhost