Internationalization In A NativeScript Mobile App With Angular

I’m an English only speaker, reader, and writer, so when I download an application from iTunes or Google Play, it is going to be in English. There are many people like this, but possibly in a language other than English. When I release my English-only application, how much of the world am I neglecting? To get the most success for your application, it makes sense to add internationalization (i18n) support so users can access your application in their native language.

Back in my AngularJS days I was using an incredible library called ng-translate and lucky for me, and everyone else, there is a variation of that same library for later versions of Angular. This new library, called ng2-translate, accomplishes the task of multiple language support in your application.

We’re going to see how to add internationalization support to our NativeScript Android and iOS application built with the Angular framework.

Creating a NativeScript Android and iOS Application with Angular

When looking over the documentation for ng2-translate, I found it confusing and difficult to understand. This is probably because it being in bits and pieces. For that reason we’re going to create a fresh application and work our way up.

From the Terminal (Mac and Linux) or Command Prompt (Windows), execute the following commands:

tns create TranslateProject --ng
cd TranslateProject
tns platform add ios
tns platform add android

The --ng flag in the above indicates that we are creating an Angular with TypeScript project. It is important to note that if you’re not using a Mac with Xcode installed, you cannot build for the iOS platform.

The goal for this project is demonstrated by the animated image below:

We will have various language sets that will translate the text on a button. When the device language changes, so will the language on the button.

Before translations can happen, the ng2-translate library must be installed into the project. It can be installed by executing the following from the command line:

npm install ng2-translate --save

With the library installed we can work towards translating our application components.

Adding Translation Files to the Application

As a developer we can define where we wish to store translation files. These files are one language per file and in JSON format. For our project, we’re going to store our language files in the project’s app/i18n directory.

Let’s create the following two files using the command prompt:

touch app/i18n/en.json
touch app/i18n/es.json

If you’d rather not use the command line to create these files you don’t have to, but essentially we’ve created a file for Spanish and English.

In the en.json file add the following JSON:

{
    "hello": "hello",
    "goodbye": "goodbye"
}

Likewise we’re going to open the project’s es.json file and add the following JSON:

{
    "hello": "hola",
    "goodbye": "adios"
}

We’ve named the keys in each of the JSON objects the same, but the values are in their translated equivalent. You can keep adding as many files as you want, just make sure to match the language abbreviation in the file name.

With some translation files in place, we need to bootstrap the library.

Bootstrapping the Angular Translate Library Bootstrapping ng2-translate is like bootstrapping any other Angular service. We need to add it to the project’s @NgModule block. Open the project’s app/app.module.ts file and include the following:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { Http } from "@angular/http";
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from "ng2-translate";

import { AppComponent } from "./app.component";

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, '/i18n', '.json');
}

@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptHttpModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        })
    ],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

Notice in the above that we’ve imported the NativeScriptHttpModule, Http, and several translation services. The Angular Translate library requires the Angular Http module.

Because NativeScript uses AOT when compiling we need to export a function that uses the TranslateStaticLoader class. This function can be used within the TranslateModule.forRoot found in the imports section of the @NgModule block.

Now we can start translating!

Making use of Angular Translate in the NativeScript Mobile Application

We have a single page application that doesn’t do a whole lot, but proves to be a useful example for getting internationalization working for iOS and Android.

Open the project’s app/app.component.ts file and include the following TypeScript code:

import { Component } from "@angular/core";
import * as Platform from "platform";
import { TranslateService } from "ng2-translate";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public language: string;

    public constructor(private translate: TranslateService) {
        this.language = Platform.device.language;
        this.translate.setDefaultLang("en");
        this.translate.use(Platform.device.language.split("-")[0]);
    }

}

In the above code we import a few Angular, NativeScript, and Angular Translate components. Within the AppComponent class we have a public variable which will allow us to bind the device language to the screen.

In the constructor method we get the device language and set the default language to English. This means if we try to translate something that doesn’t exist, it will default to English. In the end we will try to use whatever the device language is set to.

To translate strings of data in our UI, it would look like the following. Open the project’s app/app.component.html file and include:

<ActionBar title="{N} Translate Example"></ActionBar>
<StackLayout horizontalAlignment="center" verticalAlignment="center">
    <Label text="Language: {{ language }}" class="h1"></Label>
    <Button text="{{ 'hello' | translate }} / {{ 'goodbye' | translate }}" class="btn btn-primary"></Button>
</StackLayout>

In the above UI we have a standard action bar, but centered in the screen we display the language and use the translate pipe to translate based on the key on the left.

Conclusion

You just saw how to include translation files in your NativeScript Angular application for internationalization support. This was made possible by using the very popular Angular Translate library that works for both web applications and mobile applications. By adding multiple languages to your application you widen the opportunity to reach more people, get more downloads, and make more money from your application.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.