i18n with Angular 6+

May 15, 2018

I always worked with ngx-translate  a fantastic library that help you a lot to translate your angular applications.

However today, after Angular 6 and the new cli has been released, I decided to give a try to i18n. At the beginning I struggled a bit to make everything working correctly but, thanks to @ocombe , I easily create a good Proof Of Concept to start on.

I try to summarize the steps that you need to perform to make it working:

Requirements: - node >= 8 - angular/@cli 6.0.1

The first step we need to perform is to install/upgrade angular/@cli

npm install -g @angular/[email protected]

then we can generate our new project:

ng new translations-prj

You'll be surprised how fast it's now to install all the dependencies ;)

Now that our project is ready to use open the app.component.html in src/app, remove the entire content and just add:

-----------

Hello

-----------

The only "weird" part is `i18n` that tell angular to translate the word Hello.

In the terminal we can run now:

ng xi18n --i18n-locale en

this will generate a file called: message.xlf.

In case you prefer to generate the translation file with another name, add the option:  --out-file source.xlf.

Inside src create a new folder called **locale, **copy the file message.xlf and rename to:

messages.fr.xlf

Do not change anything inside but after the source tag add:

Hello World

**   Bonjour!**

....

Now that we got the French one we can try to add another language and of course I decided to create the Italian one ;).

Inside the same folder (locale) **copy **messages.fr.xlf and create:

  • messages.it.xlf

This time we just need to change the translation:

Buongiorno

We almost done the last step is the angular.json file (I can say the trickiest part)

[gist id="77f7c47b5455f178aa09468d74982762"]

(https://gist.github.com/daniele-zurico/77f7c47b5455f178aa09468d74982762)

You'll see there 2 changes from the basic file generated by the cli under:

  • build > configurations
  • serve > configuration.

Copy them and now you can see the final result just running:

ng serve --configuration=it or ng serve --configuration=fr

If you need a production build: ng build --configuration=fr or ng build --configuration=it

for more specific use cases refer to the angular documentation

Last matter to talk about is runtime translations....is i18n ready for that? No unfortunately, but looks like that it will be ready for v7.

@Update

What about if I want to translate an attribute? No worries it's quite easy to do. Lets' say that we have an href and we want to translate it so what we'll do is:

<a **i18n ****18n-href** href="tel: callCentreNumberFormated">callCentreNumber</a>

So in this case :

  1. i18n will translate callCentreNumber
  2. 18n-href  will translate tel: callCentreNumberFormated

having as result (based on your translation) something like that:

<a _ngcontent-c0="" href="tel: xxxxxxxx">xxx xxx xxxx</a>

If you want to avoid to autogenerate the id for you and provide a description we can do something like that:

<a i18n="Display the [email protected]@callCenterNumber" i18n-href="Format the callCentreNumber for a [email protected]@callCentreNumberFormated" href="tel: callCentreNumberFormated">callCentreNumber</a>

where:

  1. "Format the callCentreNumber for a link" = description
  2. "callCentreNumberFormated" = id

and this technique works for any attribute of any element :)

If you enjoyed this post follow me on twitter @Dzurico