Angular Localization With Transifex Native

When considering Angular localization, the most common and out-of-the-box solution is a file based approach that will hold all your strings. There are some libraries out there, which manage strings for you: the built-in Angular i18n module or the library ngx-translate are ones of the most used. There is also the library i18next, which is a general localization framework that supports both pure JS and framework-powered applications.

The built-in i18n module is the easiest way to start localizing an Angular application but it has some downsides: first of all you can't change the locale on the fly, but you need to compile all the languages and generate the application for each of them, there is no easy way to create a custom translations loader. Secondly, only supports XML files, which are more complex to maintain than, for example, JSON ones.

The second one, ngx-translate, was created to bypass those limitations. It works well, it's mature and has a high rate of adoption, but despite of that, the built-in module is evolving fast and soon will support all the features provided by this great third-party library. Its main downside is, again, the file based approach.

The last one, i18next is a mature and powerful library for managing file based translations, it has a lot of features and probably will not be superseded by the built-in Angular module for localization. It's constantly maintained but it has the same downside of all the previously referred solutions: it's a file based approach which needs much more effort in order to perform different tasks like branching, releasing, etc.

In this post, we will guide you on how to implement Angular localization and internationalization using a different approach, which does not involve managing files. More specifically, we will focus on an alternative called Transifex Native, which you can simply use in your code with no additional work on your side. All translatable content is managed by Transifex Native and all translation updates are served over the air, with additional caching and grouping functionality that you control.

Installation

To start using Transifex Native, you will need to install the Transifex Native JavaScript SDK and the additional Angular components library to your code. After that, you have to create a Transifex Native project in the Transifex application. The Transifex project will provide the required credentials for linking your application to the content delivery system (CDS) that will serve all your content.

<code class="language-javascript">npm install @transifex/native @transifex/angular @transifex/cli --save</code>

As we want to use the Transifex Native Angular SDK in our application we need some extra steps to take advantage of all the elements exposed by the SDK in our templates and code.

Declare the TXNativeModule

In our main application module we need to add the Native module, like this:

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

import { BrowserModule } from '@angular/platform-browser';

import { TxNativeModule } from '@transifex/angular';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 TxNativeModule.forRoot(),
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

This way we can have available all the elements provided by the Transifex Native Angular SDK in our application.

Initialize the singleton translation service

In our entry component, we need to inject the translation service provided by the SDK and initialize the library with the generated token from our Transifex project. The service is a singleton instance and can be used in any part of our application, as the initialization is done globally.

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

import { TranslationService } from '@transifex/angular';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 constructor(private translationService: TranslationService) {
 translationService.init({
 token: '1/adfdaca976eb9b4d554d7******',
 });
 }
 }

The Internationalization Process

With the SDK in place, you can start using the provided functions in your code. The Native SDK offers different ways in order to mark strings for localization:

• The T and UT components for using in templates
• The T decorator for using in variable declarations
• The translate pipe for using in templates

This is an example of using Transifex Native on a template:

  <h2></h2>

  <p>

    <UT

      str="To review the <b>terms of service</b> click here: <a href=\'terms\'>View terms</a>">

    </UT>

  </p>

  <br/>

  <p>

    <T

      str="Number of apples in the basket: {apples}"

      [vars]="{ apples: apples_number }">

    </T>

  </p>

As you can see in the example above, we've used the translate pipe and the T/UT components in order to mark the strings you want to translate, and pass attributes, like variables. Other attributes available are key identifier, tags, character limit, comments, and context. These attributes will be available to the localization team as additional context to do their work better.

You can also define pluralized strings using the ICU syntax inside your strings, like in the example below.

<UT

  str="Updated: {minutes, plural, =0 {just now} =1 {one minute ago} other