Internationalization (i18n)

In this chapter, we are going to build a simple multi-language support for an application. We are about to create services to translate application strings, switch languages based on user interactions, and also using third-party libraries for more sophisticated translation scenarios.

For a basic multi-language support we need at least three blocks:

• language files, preferably in the JSON format
• Angular service to load one or multiple language files
• Angular pipe for a convenient mapping of resource keys to translated values

We start with generating a new Angular application called app-i18n:

ng new app-i18n
cd app-i18n

Let's also use Angular CLI to generate our translation layer blocks, the TranslateService and the TranslatePipe:

ng g service translate
ng g pipe translate

We also need at least a single language file to demonstrate the translation process in action, and optionally use as a default or fallback locale. Create a new i18n folder in the src/assets one, and put an en.json file there with the following content:

src/assets/i18n/en.json:

{
  "TITLE": "My i18n Application (en)"
}