I18n not working

I’m following this tutorial: http://www.gajotres.net/ionic-2-internationalize-and-localize-your-app-with-angular-2/

but it does not work!

when i put “Platform, translate: TranslateService” in App.js constructor, he not run.

Does anyone have any idea what it is?


Given only what you’ve said here, I’m guessing you’re writing TypeScript in a JavaScript project. Either make a TypeScript project (my recommendation) or write only JavaScript.

1 Like

I’m only writing in typescript.

We’re going to need actual code and actual error messages. “put … in App.js constructor” and “not run” is not enough.

1 Like

The ng2-translate page have some examples that made me get it to work. There is also a description on how to use it with ionic2.
Did you remember to do the imports like import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate'?

1 Like

When i put:

constructor(platform: Platform, translate: TranslateService,) {
    this.rootPage = HomePage;
    this.translate = translate;

He shows me a syntax error

Ok, here is an example that i think should work:


import {App, Platform} from 'ionic-angular';
import {provide} from 'angular2/core';
import {Http} from 'angular2/http';
import {Splashscreen, StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {TranslateService, TranslateLoader, TranslateStaticLoader, TranslatePipe} from 'ng2-translate';

	template: '<ion-nav [root]="rootPage"></ion-nav>',
	providers: [
		provide(TranslateLoader, {
			useFactory: (http: Http) => new TranslateStaticLoader(http, 'lang', '.json'),
			deps: [Http]
	config: {} // http://ionicframework.com/docs/v2/api/config/Config/
export class MyApp {
	rootPage: any = HomePage;

	translate: TranslateService;

	constructor(platform: Platform, translate: TranslateService) {
		this.translate = translate;
		translate.use('en'); // The translated language you want to use
		// The line above expects the file en.json with translations in your www/lang folder
		platform.ready().then(() => {
			// ...


<ion-navbar *navbar>
			{{ 'TESTING_TRANSLATE' | translate }}


import {Page} from 'ionic-angular';
import {TranslatePipe} from 'ng2-translate';

	templateUrl: 'build/pages/home/home.html',
	pipes: [TranslatePipe]

export class HomePage {
	constructor() {


	"TESTING_TRANSLATE": "Whatever_you_want_to_translate_this_to"

Let me know if you manage to make this work.

1 Like

Does the syntax error talk about unexpected tokens, specifically the ‘:’? If so, back to my original theory.

The problem should be this:

1 Like

For me it works with ionic. However, when added Electron (electron) it’s not working for Electron.
It gives me this error…

Unhandled Promise rejection: Cannot read property 'xxxx' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'xxxx' of undefined(…)

it works.
however, when it is run on android, the information does not appear.

I have the same problem. It works fine when i use ionic serve but when i want to run it on android the information doesn’t appear.

Does anyone have a solution for this problem?


try to see if the directory of json are no “/”

template: ‘<ion-nav [root]=“rootPage”>’,
providers: [
provide(TranslateLoader, {
useFactory: (http) => new TranslateStaticLoader(http,


, ‘.json’),
deps: [Http]
config: {} // http://ionicframework.com/docs/v2/api/config/Config/

this solved my problem


The mentioned blogpost is outdated. See this for the up to date approach:

see example code:

Hi All.
I’m trying to initializate the translate service with the selected language by the user with a service that loads his config from sqlite but when the page loads the texts blinks allowing you see both languages. How can I start the service with this config? Do I need to set the provider when it bootstrap? If so, any help will be well appreciated.

I would display a loading spinner until the translation is loaded.

1 Like