IONIC2 | Internationalization (i18n) of Ionic2 apps – Revised

abba Ionic2, Mobile App 1 Comment


Polish your apps by incorporating Internationalization (i18n) of Ionic2 apps and Localization

Revised to work with IONIC2 2.0.0-rc.0.
This post will explain how to implement Internationalization (i18n) of Ionic2 apps and localization (l10n) to externalize the strings in your ionic2 app. This post is based on Ionic2 version : 2.0.0-rc.0. Click here to learn more about i18n or l10n. You can read more about programming in ionic here. I will be using ng2-translate for this post.

This post uses the 2.0.0-rc.0 version of Ionic2, so make sure to update to 2.0.0-rc.0 version of Ionic2 as follows. Add the sudo keyword if the following installation fails.

npm install -g ionic // install 2.0.0-rc.0 version of ionic2
npm update -g ionic  // update existing installation of ionic to latest ionic2 version
Step 1: Install ng2-translate module via the npm command. Add the sudo keyword if the following installation fails.

npm install ng2-translate --save
Step 2: In app.module.ts, import the TranslateModule, TranslateStaticLoader and other required imports.

import {HttpModule} from '@angular/http';
import {TranslateModule, TranslateStaticLoader, TranslateLoader} from 'ng2-translate/ng2-translate';
import {Http} from '@angular/http';
import {BrowserModule} from "@angular/platform-browser";
Step 3: In app.module.ts, Update @NgModule to add the provider for TranslateModule (Line: 9-14)

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

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: createTranslateLoader,
      deps: [Http]
    })
  ],
  exports: [BrowserModule, HttpModule, TranslateModule],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2
  ],
  providers: []
})
export class AppModule {}
Step 4: In app.component.ts, Update the constructor with TranslateService and add call to initTranslation function. Don’t forget to add the import for TranslateService.

constructor(public platform: Platform, private translate: TranslateService) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];

    //initialize ng2-translate
    this.initTranslation();
  }
Step 5: In app.component.ts, add the initialization function for TranslationService.

initTranslation() {
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(fr|en|es|in|zh)/gi.test(userLang) ? userLang : 'en';

    // this language will be used as a fallback when a translation isn't found in the current language
    this.translate.setDefaultLang('en');

    // the lang to use, if the lang isn't available, it will use the current loader to get them
    this.translate.use(userLang);
  }
Step 6: The preferred way is to keep the strings external to the code. Create the en.json file that will hold your translations strings for en locale, in src/assets/i18n folder. You can add additional json for all the languages supported in the src/assets/i18n folder.

{
  "HOME": "Home",
  "SETTINGS" : "Settings",
  "BACK" : "Back",
  "MENU" : "Localized Menu",
  "PAGE1" : "Page Unooo"
}
Step 7: You can now use the externalized strings in your page1.html as :

{{"MENU"|translate}}
Step 8: To get translated strings in your app.component.ts, you can use as follows:

this.translate.get("HOME", null).subscribe(localizedValue => console.log(localizedValue));
Step 9: In your page templates ts file, you do not need to do anthing.
Step 10: In your page template html file, you can use translate as follows:

{{"PAGE1"|translate}}