NOTE

This plugin is no longer needed to make ng2-translate work with NativeScript. Instead you can use it as normal following this as a guide to set it up:

#5 (comment)

• Install
• Usage
• Why the TNS prefixed name?
• Accolades

Install

npm install nativescript-ng2-translate --save

Usage

1. Add locale translation files

You can create these anywhere in your app but let's say you create an assets folder and in that an i18n folder so:

• app/assets/i18n folder

Then in there, create translation files, for example:

• en.json (English):

{
  "HOME": "Home"
}

• es.json (Spanish):

{
  "HOME": "Casa"
}

2. Setup NativeScript/Angular

• app.ts:

import {nativeScriptBootstrap} from 'nativescript-angular/application';

// angular
import {Component, provide} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';

// libs
import {TranslateLoader, TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
import {TNSTranslateLoader} from 'nativescript-ng2-translate/nativescript-ng2-translate';

@Component({
  selector: 'app',
  template: `
  <StackLayout>
    <Label [text]="'HOME' | translate"></Label>
  </StackLayout>
  `,
  pipes: [TranslatePipe]
})
class TestComponent {}

nativeScriptBootstrap(TestComponent, [
  HTTP_PROVIDERS,
  provide(TranslateLoader, {
    useFactory: () => {
      // pass in the path to your locale files
      return new TNSTranslateLoader('assets/i18n');
    }
  }),
  TranslateService
]);

Why the TNS prefixed name?

TNS stands for Telerik NativeScript

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old): https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

To avoid confusion with iOS native classes, TNS is used instead.

Accolades

• Project using this library angular2-seed-advanced
• Olivier Combe's ng2-translate library

Tutorials

Need more help getting started? Check out these Angular Translate tutorials for NativeScript Android and iOS applications.

• Angular Translate in a NativeScript Angular Application

License

MIT