English English

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/ard-site/templates/ardsite/library/Designer/Content/SingleArticle.php on line 198

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 [email protected]@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

Catégorie :

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok