Anyone tried the Translate service?

luchillo17 · February 5, 2016, 8:32pm

True, it should be a feature request.

icarus_31 · February 5, 2016, 9:06pm

Yes, you understood what I wanted to do.

Thanks guys!

icarus_31 · February 5, 2016, 9:31pm

I found another solution to translate the result of my pipe. In my first pipe, I return the string corresponding to my key and then translate it. Important, the return string needs to be between single quote, not double.

danielbertini · March 3, 2016, 1:56am

Hello @icarus_31, you can use:
this.translate.instant(‘mystring’);

icarus_31 · March 4, 2016, 12:40am

Hi @danielbertini,

How did you get that “instant” function? I am running version 1.8.0 and don’t have it

danielbertini · March 4, 2016, 2:14pm

Hello @icarus_31, i am using the same version 1.8.0, you implemented in the contructor method like this?

import {TranslateService, TranslatePipe} from "../../../../node_modules/ng2-translate";

@Page({
    templateUrl: 'build/pages/auth/signup/signup.html',
    pipes: [TranslatePipe],
    providers: [AuthService],
    directives: [FORM_DIRECTIVES]
})
export class Signup {
    contructor(private translate: TranslateService) {
        this.translate = translate;
        this.translate.instant('json.string');
    } 
}

luchillo17 · March 4, 2016, 7:40pm

Does the translate pipe work in IOS? i’m having trouble in IOS with the numeric pipe because IOS doesn’t support the internationalisation api, isn’t this api used by the translate pipe as well?

danielbertini · March 4, 2016, 8:03pm

I don’t know, i not test on iOS yet.

luchillo17 · March 4, 2016, 8:26pm

If it doesn’t relate to this:

If using webpack the way i imported it is after installing the polyfill package put this in webpack.config.js:

module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    'intl/index.js',
    'intl/locale-data/jsonp/en.js',
    path.resolve('app/app')
  ],

icarus_31 · March 5, 2016, 12:43am

@danielbertini, when you start typeing “this.translate.” do you see the “instant” function appears as an available function? I don’t, so this is why I was asking you that.

Here what I see:

ocombe · March 6, 2016, 8:57am

Hey, you might want to try 1.9 we have a nice TRANSLATE_PROVIDERS that you can add to bootstrap now.
Also this should fix a bug with method instant throwing an error when the translation isn’t available.

If you need help, don’t hesitate to ask here or to open an issue on github.

icarus_31 · March 6, 2016, 2:43pm

Hi @ocombe

I tried to change my code, but now nothing is working.

I had use useStaticFilesLoader before, but now it is no more valid.

I think I need to use the below, but don’t know where to add that code. Would you mind to help me on that one?

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

Here my code:

app.ts

constructor(..) {
    this._translate = translateService;
    this.translationConfig();
}

translationConfig() {
    let prefix = 'assets/i18n/';
    let suffix = '.json';
    
    this._translate.useStaticFilesLoader(prefix, suffix);

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

    // optional, default is "en"
    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);
}

Thanks

ocombe · March 6, 2016, 2:59pm

You need to inject that in the bootstrap of your application.
For Ionic 2 I think it’s the providers property of your @App component.
That would be something like that:

import {provide} from 'angular2/core';
import {TRANSLATE_PROVIDERS, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

@App({
  templateUrl: '....',
  config: {},
  providers: [
    provide(TranslateLoader, {
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TRANSLATE_PROVIDERS
  ]
})

icarus_31 · March 6, 2016, 3:40pm

it can’t find “provide”:

Cannot find name ‘provide’.

ocombe · March 6, 2016, 3:46pm

import {provide} from 'angular2/core';

icarus_31 · March 6, 2016, 3:50pm

Wow, learning lots of things today!

Now, I have this:

http://localhost:8100/i18n/en.json 404 (Not Found)

ocombe · March 6, 2016, 4:18pm

Provide is used to configure providers by replacing one class with another for the dependency injection.
You can use it in unit tests, or when you change the location strategy for the router (to use hash instead of html 5 routes: https://angular.io/docs/ts/latest/api/router/HashLocationStrategy-class.html).
In this case we use it to change the loader (or to define the parameters other than the default parameters).

But anyway, it should call http://localhost:8100/assets/i18n/en.json and that’s not the case.
I just checked and there’s a bug, I’ll fix it asap (within the hour).

Edit:
Ok my bad, it’s not a bug, it’s just that you don’t want to use TRANSLATE_PROVIDERS if you want to override the TranslateStaticLoader.

You should use:

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

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

Because TRANSLATE_PROVIDERS is already an instance of the static loader with the default params.

icarus_31 · March 6, 2016, 4:30pm

Yep! Working great!

Thanks

shmu80 · March 26, 2016, 2:08pm

I facing SyntaxError with the code above. Refer the error code Row 15, Column 23 is belong to (http: Http)

Do you know the reason?

ERROR in ./app/app.js
Module build failed: SyntaxError: C:/Projects/apps/myapp/app/app.js: Unexpected token (15:23)
  providers: [
    provide(TranslateLoader, {
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService

Below is my code

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

@App({
  templateUrl: 'build/app.html',
  config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
  providers: [
    provide(TranslateLoader, {
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService
  ]
})

icarus_31 · March 26, 2016, 2:41pm

Try to add TRANSLATE_PROVIDERS to ng2-translate.