Anyone tried the Translate service?

Ionic Framework ionic-v3
61

wow! This is strange, no?

I am still running beta 8 and no issue

Anyway, goof for you! :slight_smile:

62

Yes, this is strange. I hope it wonā€™t have any issue for future release. Hope future release is backward compatible.

63

So what is the current way of using this now, then?

Iā€™m getting an error on

useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),

Here are my imports:

import {provide} from 'angular2/core';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
64

I am using version 2.1.0 of ng-translate

In my provider, I have

provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}), TranslateService

What is your error?

65

I have the same provider.

Getting unexpected token at (http: Http).

67

Most ā€œunexpected tokenā€ errors I see here are caused by people copypasting TypeScript into JavaScript projects.

68

Okay, so whatā€™s the javascript equivalent here?

69

No clue. I canā€™t stand JavaScript.

70

I have gotten rid of that error by changing that (http : Http) to just (http). Iā€™m guessing thatā€™s one of the differences between .js and .ts.

But now Iā€™m getting an error that UseStaticFilesLoader is not a function. This is what my App component looks like.

@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [HTTP_PROVIDERS,
provide(TranslateLoader, {
  useFactory: (http) => new TranslateStaticLoader(http, 'app/assets/i18n', '.json'),
  deps: [Http]
}),
TranslateService],

pipes: [TranslatePipe],
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})

And this is what my translateservice init looks like.

initializeTranslateServiceConfig() {//internationalization
var prefix = 'assets/i18n';
var suffix = '.json';
this.translate.useStaticFilesLoader(prefix, suffix);

var userLang = navigator.language.split('-')[0];
userLang = /(en|pt-br|es)/gi.test(userLang) ? userLang : 'pt-br';

this.translate.setDefaultLang('pt-br');

this.translate.use(userLang);

}

71

Youā€™re not showing how translate is initialized. If youā€™re still trying to force TypeScript sample code into your JavaScript project, youā€™re going to keep running into walls. One is that Angularā€™s dependency injector can automatically deduce what to inject for properly typed constructor parameters; when you lose that typing information, you have to futz around with defining a static parameters instance variable to help DI do its work. Some syntax examples are in this SO question.

72

Hello, since so many people are struggling iā€™ve wrote a blogpost:

http://blog.thecodecampus.de/ionic2-angular2-translate-internationalize-localize-app/

see example code:

73

have you solved the error? i am too is having hard time in converting ts to js for the ng2-translateā€¦i also got some errors

74

I have not, but I believe I know how to implement something that works nearly the sameā€¦

As soon as I figure out a simpler way to read a local json than making a http request or using webpack.

75

Can somebody help me? (solved, see update2)

I need to get translation object in my angular2 component using TranslateService.
I include ng2-translate to my ionic2 project according this tutorial (example for ionic2).

This code works

this.TranslateService.getTranslation('en')
            .toPromise()
            .then(translateObject => {
                console.log(translateObject); // return my json object
            });

But how can I automatically get used language?
this.TranslateService.currentLang and this.TranslateService.getLangs() return undefined in any component except start @app component.

Maybe something wrong in my service initialization ?

@App({
    template: `
    <ion-nav [root]="rootPage"></ion-nav>
    `,
    providers: [
        TranslateService,
        AuthApiService,
        provide(Http, {
            useFactory: (xhrBackend: XHRBackend,
                         requestOptions: RequestOptions,
                         auth: AuthorizationService,
                         globals: GlobalsService,
                         $httpMocks: $httpMocks) =>
                new HttpInterceptor(xhrBackend, requestOptions, auth, globals, $httpMocks),
            deps: [XHRBackend, RequestOptions, AuthorizationService, GlobalsService, $httpMocks]
        }),
        provide(TranslateLoader, {
            useFactory: (http: Http) => new TranslateStaticLoader(http, 'build/assets/i18n', '.json'),
            deps: [Http]
        })],
    config: {}
})

Update: All ok with providers. For some reason ng2-translate initialization take some time.
This code works fine

setTimeout(()=> {
            console.log(this.TranslateService.getLangs()); return ["en"]
            console.log(this.TranslateService.currentLang); // return "en"
        }, 2000)

But this is bad solution. Any ideas for fix ?

Update2:
Method use return an observable. Solved my problem by moving rootPage initialization to translationConfig:

translationConfig() {
        var userLang = navigator.language.split('-')[0];
        userLang = /(zh|en)/gi.test(userLang) ? userLang : 'en';

        this.translate.setDefaultLang('en');
        this.translate.use(userLang)
            .subscribe(langObj => {
                this.rootPage = StartPage; // on translate load run app with start page
            })
    }
77

Hello guys,
any code example for ionic 2 ?

78

Iā€™m using .js so if youā€™re using .ts itā€™ll be different.

Add this to your app.js:

import {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from ā€˜ng2-translate/ng2-translateā€™;

In the @Component for the app.js:

providers: [
    provide(TranslateLoader, {
      useFactory: (http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService
],
pipes: [TranslatePipe]

Then you add the TranslateService as usual in the constructor and the bootstrap, then add the following method:

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

After that, on every page you want to use it in:

import {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

And add the pipe:
pipes: [TranslatePipe]

Then you need to make a .json with all the translations youā€™ll be using in www/assets/i18n/ named after each language you want to use ( so like en.json, fr.json and the like ).

Now every time you want to translate something you use the translate pipe, like this:
{{ ā€œfooā€ | translate }}

1 Like
79

Hello,
Thank you very much. I will try it tomorrow to my job !!! Have a great
day!!!

Ī­Ī³ĻĪ±ĻˆĪµ:

80

I created this post where I show you how to internationalize and localize your Ionic 2 app in order to support different languages. In the example I show you how to build a basic app which supports three languages. We will also go the extra mile and build the app to support RTL.

1 Like
81

There is one issue I am facing. The language default is English on my app, but if I changed to another language then come back to revert back to Englishā€¦ the dropdown option should display the current set language but it is default to English. Any pointers where I am going wrong? What I need to check? I followed your Tutorial @dayanajabif

82

How come all this code is so different from the official doc code : https://ionicframework.com/docs/v2/resources/ng2-translate/

(I am new to angular 2, and this is frustratingā€¦)

EDIT: The post from @dayanajabif should be the Official Docā€¦it works. Thank your @dayanajabif!

1 Like