Using extract-i18n Command in Angular CLI

By Arvind Rai, January 08, 2022

On this page we will learn using extract-i18n command in Angular CLI.
1. Angular CLI provides extract-i18n command to extract the marked text in the component into a source language file.
2. The extract-i18n command is run from project root directory as following.

ng extract-i18n

This will generate messages.xlf file in project root directory.
3. The following marked text are included in translation.
  a. The text included by element marked with i18n .
  b. Attributes marked with i18n- attribute.
  c. Text tagged with $localize .

Technologies Used
Step-1: Enable Localization Features
Step-2: Create HTML Template
Step-3: Run extract-i18n Command
Step 4: Create Translation File for Each Language
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. @angular/localize 13.1.0
3. Node.js 12.20.0
4. NPM 8.2.0

Step-1: Enable Localization Features

To enable localization features in our Angular CLI application, we need to add @angular/localize package as following.

ng add @angular/localize

Run the above command from root directory of the project where package.json is located. This command will update package.json and polyfills.ts files in our project.

Step-2: Create HTML Template

Use i18n, i18n- attribute and $localize for those text which needs to be internationalized.
app.component.html

<h1 i18n> Hello World! </h1>

<img src="https://www.concretepage.com/images/favicon.png" i18n-title title="ConcretePage Logo" />

<p i18n> This is winter season. 
   And there is lots of cold here. </p>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step-3: Run extract-i18n Command

The extract-i18n command is run from root directory of the project.

ng extract-i18n

This command generates messages.xlf file in project root directory.
Find the options to be used with extract-i18n command to change the source language file location, file name and format.
--output-path : Set the path of the output directory.
--out-file : Set the name of the output file.
--format : Set the format of the output file.
a. Using --output-path option.

ng extract-i18n --output-path src/locale

A file named as messages.xlf is created in src/locale directory.
b. Using --out-file option.

ng extract-i18n --out-file mymessages.json

A file named as mymessages.json is created in root directory of the project.
c. Using --format option.

ng extract-i18n --format=xmb

A file named as messages.xmb is created in root directory of the project. Source language file can be created into .arb, .json, .xlf and .xmb formats.
d. Using --out-file and --output-path options together.

ng extract-i18n --out-file mymessages.json --output-path src/locale

A file named as mymessages.json is created in src/locale directory.

Step 4: Create Translation File for Each Language

1. Run the following command from root directory of the project.

ng extract-i18n --output-path src/locale

This command will create messages.xlf file in src/locale directory.
messages.xlf

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="7121872801180631554" datatype="html">
        <source> Hello World! </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
      <trans-unit id="619064616906340334" datatype="html">
        <source>ConcretePage Logo</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
      <trans-unit id="646710550689369795" datatype="html">
        <source> This is winter season. And there is lots of cold here. </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">5,6</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

2. Now to translate file in each language, we need to make copy of the messages.xlf file in src/locale directory with following syntax.

message.{locale}.xlf

Suppose we want to create translation file for French language (fr), our file name will be as following.

messages.fr.xlf

3. Find one translation unit from messages.xlf file.

<trans-unit id="7121872801180631554" datatype="html">
  <source> Hello World! </source>
	<context-group purpose="location">
	  <context context-type="sourcefile">src/app/app.component.html</context>
	  <context context-type="linenumber">1</context>
  </context-group>
</trans-unit>

Add <target> tag and put here French translated text of <source> tag text.

<trans-unit id="7121872801180631554" datatype="html">
  <source> Hello World! </source>
  <target> Bonjour le monde! </target>
  <context-group purpose="location">
      <context context-type="sourcefile">src/app/app.component.html</context>
      <context context-type="linenumber">1</context>
  </context-group>
</trans-unit>

In the same way, create translation file for each language.

Run Application

To run the application, find the steps.
1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Add @angular/localize library.
4. Run ng serve using command prompt.
5. Access the URL http://localhost:4200
Find the print screen of the output.