Angular — i18n Internalization

Make your app multilingual with the Angular package “localize”.
This package allows you to generate “xlf” files which contain texts of every HTML tags (marked with “i18n”) and strings with the command “localize” from your Angular application.

Image for post
Image for post

This package can be installed with the following command:

“xlf” files can be generated with this command:

Making text translatable

HTML tags

If you want to translate your tags in your HTML file, then you have to use the tag “i18n”.

Your text is then translated into the tag “trans-unit” of your “xlf” file.
It looks similar like this:

A trans-unit has a unique id, which is different every time the “xlf” file is recreated.
It is also possible to use custom “trans-unit” ids.

You can also additional information “meaning” and “description” to help the translator of this app.

This will generate the following “xlf” file:

Text in your “TypeScript” file of your component

You can use “$localize” to mark strings as translatable. For example:

This string “Nice to see you here :D” will be added as well to the “xlf” file.

Add languages (locales)

If you want to translate your app, then you have to add the languages labeled in the ISO code format “ISO-639–1”.
Open your “angular.json” file and add this code between “root” and “sourceRoot”:

Also the this “tag” “de” after “production”:

Add the “tag” “de” again as well in the following section:

Here we did add the German language as an example. Please refer to this site for a list of ISO codes.
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

You need to translate your source “xlf” file “messages.xlf” into the “xlf” file “messages.de.xlf”.
The “xlf” file “messages.de.xlf” contains the following:

If there is no translation for a text or string, then you will get this message:

Building or running your app with your locales

Now your app is ready to go multilingual.

You can run your Angular app for example with the German locale.

An Angular app can be built also with all the languages. This is possible with this command:

If the Angular should be only with a certain language, then you can use this command.

More about localization (i18n) in Angular:
https://angular.io/guide/i18n#localizing-your-app

Tutorials about Linux, Java and information about IT — https://ard-site.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store