I18n not working

Ionic Framework ionic-v3
1

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?

thx

2

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
3

I’m only writing in typescript.

4

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

1 Like
5

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
6

When i put:

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

He shows me a syntax error

7

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

app/app.ts:

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';

@App({
	template: '<ion-nav [root]="rootPage"></ion-nav>',
	providers: [
		provide(TranslateLoader, {
			useFactory: (http: Http) => new TranslateStaticLoader(http, 'lang', '.json'),
			deps: [Http]
		}),
		TranslateService,
	],
	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(() => {
			// ...
		});
	}
}

app/pages/home/home.html:

<ion-navbar *navbar>
	<ion-title>
		Title
	</ion-title>
</ion-navbar>
<ion-content>
	<ion-list>
		<ion-item>
			{{ 'TESTING_TRANSLATE' | translate }}
		</ion-item>
	</ion-list>
</ion-content>

app/pages/home/home.ts:

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

@Page({
	templateUrl: 'build/pages/home/home.html',
	pipes: [TranslatePipe]
})

export class HomePage {
	constructor() {
	}
}

www/lang/en.json

{
	"TESTING_TRANSLATE": "Whatever_you_want_to_translate_this_to"
}

Let me know if you manage to make this work.

1 Like
8

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

9

The problem should be this:

1 Like
10

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(…)

11

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

12

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?

thx!

13

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

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

‘assets/lang’

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

14

this solved my problem

thx!

15

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

see example code:

16

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.

17

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

1 Like