Having Multiple Languages on Your Website

Having multiple languages on your website allows you to reach a wider audience and makes your application more attractive.

There are two ways to implement internationalization in Angular: ng-translate and i18n. Both can work, but there are differences I’ll explain below.

Ng-translate

This is an internationalization library for Angular.

Key points:

It allows you to handle dynamic or static content inside a service, directive, or pipe.
A nice advantage is that you can perform instant translations without reloading the entire application.

The idea behind this library was to provide i18n support until Angular could fully support it. Eventually, it will be deprecated.

i18n

i18n is Angular’s built-in internationalization tool, enabling you to create multilingual applications.
Since it is integrated, you don’t need to install anything to start using it.

Ng-translate vs i18n

Ng-translate uses JIT through bindings, which means translations can change at any time. The downside is that bindings consume a lot of memory.
Angular i18n requires you to compile the application for each language, but you can do a "live" compilation.
You need to generate separate dist folders for each language, then switch between them after a full deployment.
Angular only supports i18n in your templates.
Angular supports XLIFF or XMB (XML) formats, while Ng-translate supports JSON by default, though you can create your own loader for any format.
Angular i18n supports ICU expressions (plurals and alternate texts), which Ng-translate does not.
Ng-translate runs at runtime and only supports plain HTML, whereas Angular i18n supports HTML placeholders including Angular code.
The Ng-translate API is more feature-rich thanks to runtime execution (observables, events, etc.), which Angular i18n lacks—but that’s not necessary since translations don’t change at runtime.
Angular i18n is also better for SEO.

Adding i18n in Angular

There’s nothing to install, as i18n is built into Angular.

To start translating text, you need to mark elements with the i18n attribute:

<h1 i18n>An article</h1>

The i18n attribute helps Angular tools locate and extract static text for translation during compilation.

You can add a description and meaning to improve translation accuracy:

<h1 i18n="[meaning]|[description]@@[id]">
  An example
  <h1>
    Example:
    <h1 i18n="set an article|title of an article on the website@@articleTitle">
      An article
      <h1></h1>
    </h1>
  </h1>
</h1>

Once all the texts to be translated are marked, you can generate the translation file.

Angular CLI allows you to generate the i18n file with the command:

ng xi18n --output-path assets/i18n

This command generates a base translation file messages.xlf inside the assets/i18n.

epending on the language you want to translate your site into, rename the file to: messages.lang.xlf.

Each <trans-unit> tag represents a marked text.

All texts to translate are found in the <source> tag:

<source>texte</source>
<?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="4237d2e6410a632fbdef1f8e6e5fcd24bf012810" datatype="html">
<source>Jeu</source>
<target>Game</target>
<context-group purpose="location">
<context context-type="sourcefile">app/navbar/navbar.component.html</context>
<context context-type="linenumber">12</context>
</context-group>
</trans-unit>
<trans-unit

Compilation

If you want to compile your application into the target language, you need to edit the angular.json file.

Under the architect.build.configurations section, add a new configuration for the target language.

Define a configuration block for each language you want to support.

Compile in a Specific Language

To compile in a specific language and generate a dist folder, run the command:

ng build --configuration=lang

Serving the Application

To use different languages with i18n, you need to have separate distribution packages, meaning one for each language.

Different strategies can be used to serve the application:

Server-side language detection (via locale)
URL parameters

The URL parameter method allows you to switch the language on the client side.

In this tutorial, we will focus on the URL parameter method.

First, you need to add a shortcut for each language in the angular.json configurations under the serve section.

To serve the application in a specific language, run the command:

ng serve --configuration=lang

Your application will then open at:

http://localhost:4200/lang

So this is essentially the method for configuring your Angular application to use i18n.