Angular Translation & Localization

Since this blog is about translation and since our main targets markets here at Yes Soft are German and English speaking developers, this blog will be available in both Deutsch and English.

UI Designs

For simplicity sake UI will contain a login page only with a header and a welcome screen with “Hello world” welcome screen.

Getting Started

For this project I’m using Angular CLI v8.3.21

Cloning the Project

You need to execute:

git clone https://github.com/yes-soft-de/angular-translation.git
cd angular-translation
git checkout start 

Installing the Project

Use the command npm i on the project directory.

Adding the Translation Services

We have two ways to achieve that. The first is using i18n built-in service. The other is using ngx-translate.

In this tutorial, we shall discuss both and compare them to each other.

About i18n

  • Used in multiple subdomains structure like: en.example.com and de.example.com.
  • I couldn’t get a clear view on how to switch between the languages on the run time.
  • Uses XML format in the xlf file format.

About ngx-translate

  • Simpler to use
  • Uses http interceptor in order for translation.
  • Clear and easy lang_code.json translation file format.

i18n

Adding The Service

ng add @angular/localize

Shortcut for Extracting Translatable data

We add the following to package.json:

{
    "scripts": {
        // ...
        "int:extract": "ng xi18n --output-path src/locales",
        // ...
    }
}

Marking Data for Translation

For instance, if we want to change the lines in the Login form from Your Password to Ihre Passwort we start by changing the label tag to be as follows:

<!-- Add the i18n=".." to the label -->
<mat-label i18n="@@input-login-email">Your Email</mat-label>
<mat-label i18n="@@input-login-password">Your Password</mat-labe>

Extracting Data to Translation Templates

In order to generate the translation sheets, first execute:

npm run int:extract

When the command finishes you should see a new directory called locales in the src folder, inside you should find a file named messages.xlf with the content:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="input-login-email" datatype="html">
        <source>Your Email</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/login-page/login-page.component.html</context>
          <context context-type="linenumber">7</context>
        </context-group>
        <note priority="1" from="description">login form email</note>
      </trans-unit>
      <trans-unit id="input-login-password" datatype="html">
        <source>Your Password</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/login-page/login-page.component.html</context>
          <context context-type="linenumber">14</context>
        </context-group>
        <note priority="1" from="description">login form password</note>
      </trans-unit>
        
      <!-- Some Other Translation Units -->
      
    </body>
  </file>
</xliff> 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*
*