IONIC2 | Internationalization (i18n) of Ionic2 apps – Revised

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 10: In your page template html file, you can use translate as follows:

{{"PAGE1"|translate}}