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:

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:

NativeScript NG2 Translate Example

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:

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:

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:

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

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:

Notice in the above that we’ve imported the NativeScriptHttpModuleHttp, 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:

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:

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.


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 Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • 柳澤隆司

    Would you put those modified files anywhere, please? I got some errors…

    • What are the errors?

      • 柳澤隆司

        Hi, Nic, thx for your response.

        I don’t know how to copy the error messages on the simulator, but the first paragraphs are:

        An uncaught Exception occurred on “main” thread.
        java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:

        Error calling module function x 5 times

        Error: com.tns.NativeScriptException: Failed to find module: “utils/utils”, relative to: app/tns_modules/

        • What version of NativeScript are you using? Are you sure your project isn’t corrupt? I’m not sure where or why you’re using utils/utils. I don’t use that module anywhere in my guide.

          • 柳澤隆司

            tns –version shows 2.4.2, and I’ve started it from scratch.

          • Does it work now that you’ve started from scratch?

  • Dragomir Ivanov

    Doing exact same steps as described in this tutorial. Getting:

    JS: ns-renderer: this.http.get(…).map is not a function
    JS: TypeError: this.http.get(…).map is not a function
    JS: at TranslateStaticLoader.getTranslation (/data/data/org.nativescript.csagent2/files/app/tns_modules/ng2-translate/bundles/ng2-translate.umd.js:157:14)
    JS: at TranslateService.getTranslation (/data/data/org.nativescript.csagent2/files/app/tns_modules/ng2-translate/bundles/ng2-translate.umd.js:278:43)
    JS: at TranslateService.retrieveTranslations (/data/data/org.nativescript.csagent2/files/app/tns_modules/ng2-translate/bundles/ng2-translate.umd.js:267:28)
    JS: at TranslateService.setDefaultLang (/data/data/org.nativescript.csagent2/files/app/tns_modules/ng2-translate/bundles/ng2-translate.umd.js:212:28)
    JS: at new AppComponent (/data/data/org.nativescript.csagent2/files/app/modules/app.component.js:12:24)
    JS: at new Wrapper_AppComponent (/AppModule/AppComponent/wrapper.ngfactory.js:7:18)

    Tried to integrate this work in a project using Angular 2.4.3, getting the same error.

    • Your error indicates that you probably didn’t include Http correctly in your project. Neither NativeScript or Angular Translate have changed since releasing this tutorial.

      Maybe put your project on GitHub and I’ll have a look?

  • Jay Pujara

    how many language are support this way? and can you provide all json file name for all laungage?

    • I believe all languages are supported using this approach. You’d have to read the Angular Translate documentation and figure out what language short names are available.


  • Kirsten K

    The translate tool works fine, but together with nativescript-webview-interface it crashes in app.component.ts in this line:

    I created a new project: tns create myproject –ng
    I installed nativescript-webview-interface and used their demo script for angular and it worked
    I used this guide for ng2-translate and it crashed
    Error: TypeError: Cannot read property ‘getCookie’ of null

    • Thanks for providing all the details!

      What does the nativescript-webview-interface do? Does it do something differently from the webbiew component that ships with NativeScript?

      No third party packages are perfect, so I’d like to try to figure out the problematic piece of the puzzle.

      • Kirsten K

        Thank you for your quick answer Nic.
        The nativescript-webview-interface sends or gets data from a webview without need to write platform specific code.
        I like to use it for the nativescript-canvas-interface to give my users the possibility to apply filters on uploaded images.
        Maybe there are better ways, but I search for long time image-filter plugins and was not able to find something like that.

        • Are you referring to this demo?:

          That is pretty ancient even at 5 months. A lot has changed in Angular as well as NativeScript between now and then. Let’s assume that this plugin still works for modern versions of NativeScript and Angular. Does Angular Translate and this plugin work with only having added the plugin? Are you able to narrow down on a point of failure by adding code until it breaks?

          I don’t know enough about this other plugin, so I don’t know how much help I’d be troubleshooting it. Maybe open an issue ticket for the developer asking if there is compatibility issues when using Angular Translate with his plugin?

          • Kirsten K

            Thanks Nic
            It really helped me to make a new project, start making ng-translate work first like you recommended and then add nativescript-webview-interface.
            Unfortunately I never found out what went wrong doing it the other way.
            I was able to add the canvas-filter plugin and it works great now.

          • Awesome! Glad you got it 🙂

  • Vishwajeet Rai

    Hi Nic,

    Nice post. It was very helpful to me.
    I have another question though-

    Can these files be pulled from any REST API ?

    My assumption would be yes and wanted your input in this.


    • I don’t think you can. They need to be loaded during application boot. However, you might want to read the Angular Translate documentation to be sure.

  • Artūras

    Hi Nic, I have installed the this plugin and I love it, but I have a problem. How to translate ngModel variable? Let’s say I have let test = ‘HELLO_WORLD!’; json file: ‘HELLO_WORLD!’ : ‘Hello world!’. I tried but it doesn’t work. Could you help me with this please?

    • I’m not sure why you’d want to do that. Wouldn’t it make more sense to use the ‘hint’ tag instead?

      Also instead of using square brackets, try something like text=”{{test |translate}}”

      Wondering if it didn’t like the notation.

      • Artūras

        Thanks for prompt reply. I have tried this but it shows [object Object]. There are many scenarios where I want to use it, but one of them to translate validation errors. Do you have any other ideas?

        • Well if ‘test’ is an object, that is your problem. You need to be translating a string, not an object.