DATEV Nine-Nine | i18n: Angular Internationalization How To
By: Matthias Alt, Stephan Bierwirth & Gerrit Riesch
Intro
What is i18n? Some secret code? The newest BMW model? …Or my PIN? 😱
Well, it’s just an abbreviation of the word “internationalization” with the “18” standing for the number of letters in between “i” and “n”. Cool dev-slang aside, providing apps with more than one language is a common task and most apps need some kind of internationalization. It’s an important topic and it should be taken care of as early as possible during the development process to reduce effort later on. Angular provides us with a built-in way to internationalize. How to use it is exactly what we are going to show you in this blog post.
Let’s do this! -> Setup
You will need at least Angular 9 but to be sure every instruction in this tutorial works properly we recommend that you have an Angular 15+ app up and running to follow our instructions. If not, you can easily create one by typing the following in your terminal (Angular CLI 15 required):
npx @angular/cli@latest new InternationalApp –directory ./Inside your app you need to include the necessary dependencies and to do some setup. Luckily Angular has got us covered with the following command:
ng add @angular/localizeThis command adds all the necessary packages. Now we need to set up our angular json to represent our sourceLocale (in our case de for German) and we need to provide a link to where we want our translations to be stored. We only have English translations for now and we locate them in the locale folder. The xlf format or XLIFF (XML Localization Interchange File Format) is an XML-based bitext format for standardization and to exchange translations. We will show an example and how to use it later on.
Next we set our default locale to de:
Now we want to add the ng-extract-i18n-merge package to enhance our workflow:
ng add ng-extract-i18n-mergeThe package extends the Angular CLI for better i18n extraction and auto-merging. It will add and remove translations from the xlf files and sort them for better readability.
We need to do some more changes in our angular json:
Our first translation
After setting this up for the builder we can extract our i18n xlf files comfortably with the following command:
ng extract-i18n - output-path src/localeWe can add this to our package.json file for convenience:
"extract i18n": "ng extract-i18n - output-path src/locale",Now we are all set to extract our first translations. For that we add the i18n directive to all text we want to be translated:
Now we can extract our translation — as described above — and we get the following entries in our en.xlf file:
As you can see our text got extracted. It also got marked with the “new” state. This shows everyone looking at the project that there have been new extractions and that translation work has to be done yet. The text is (obviously) still in German. Now we need to translate it and mark it “translated” for the next person checking to get a good idea of what has been done.
The same goes for attributes. You just need to add “i18n-” and the attribute type you want to translate:
…Then becomes…
You just need to add “i18n-title”. In that way you can translate all attributes needed. In Components TypeScript files you can also translate text:
That’s about it for basic translation needs. Further examples like plurals and more details can be found in the official Angular docs.
Build
Now let’s set up our build. An important thing to mention is that Angular will build two separate apps for the two languages and they will be available at the my-app.com/de and my-app.com/en route respectively. To do that we add the –localize flag to our build script.
"build": "ng build - localize",If you check your bundle now you can see the two separate bundles in the “de” and “en” folder respectively. For our app to work properly with the /en and /de routes we need to set the baseHref for each locale in either the angular json or with the — baseHref flag. An example server configuration for Nginx and Apache can be found here.
Final thoughts
The way Angular does translations is becoming a really good option and using the built-in solutions instead of having to use extra-dependencies is something we appreciate. It can be finicky at times, and it takes some setup but all in all it’s a good option — maybe even the best at the moment? — to do translations in Angular. The setup we showed you is only the surface of what’s possible and after trying it you can extend your example with the official Angular docs.
We hope you enjoyed our blog, and we would love to see you next time!
Your three DATEV Nine-Nine detectives,
