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.

This package can be installed with the following command:

ng add @angular/localize

“xlf” files can be generated with this command:

ng xi18n --output-path src/i18n

Making text translatable

HTML tags

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

<h3 i18n>Welcome to my website.</h3>

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

<trans-unit id="1e70beb33c2dct64464324a3a8dc0ad5ac472767" datatype="html">
        <source>Welcome to my website.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/main.component.html</context>
          <context context-type="linenumber">5</context>
        </context-group>
      </trans-unit>

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.

<h3 i18n="@@welcomeMessage">Welcome to my website.</h3>

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

<h3 i18n="top|Headline message for visitors@@welcomeMessage">Welcome to my website.</h3>

This will generate the following “xlf” file:

<trans-unit id="welcomeMessage" datatype="html">
        <source>Welcome to my website.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/main.component.html</context>
          <context context-type="linenumber">5</context>
        </context-group>
        <note priority="1" from="description">Headline message for visitors</note>
        <note priority="1" from="meaning">top</note>
      </trans-unit>

Text in your “TypeScript” file of your component

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

export class MainComponent implements OnInit {
  greetingText: String;
  
  constructor( ) {
    this.greetingText = $localize`Nice to see you here :D`;
  }
[...]
}

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”:

[...]
      "root": "",
      "i18n": { 
        "sourceLocale": "en-US", 
        "locales": { 
          "de": "src/i18n/messages.de.xlf" 
        } 
      }, 
      "sourceRoot": "src",
[...]

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

[...]
          "configurations": {
            "production": {
			  [ ... ]
            },
            "de": {
              "localize": [
                "de"
              ]
            }
          }
        },
		[...]

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

[...]
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "frontend:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "frontend:build:production"
            }, 
            "de": { 
              "browserTarget": "frontend:build:de" 
            } 
          }
        },
		[...]

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:

<trans-unit id="1e70beb33c2dct64464324a3a8dc0ad5ac472767">
  <source>Welcome to my website.</source>
  <target>Willkommen zu meiner Webseite.</target>
</trans-unit>

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

No translation found for "1e70beb33c2dct64464324a3a8dc0ad5ac472767" ("Welcome to my website.").

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.

ng serve --configuration=de

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

ng build --prod --localize

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

ng build --configuration=production,de

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