ngx-translate output return without translate

Question

I used this tutorial

https://ionicframework.com/docs/developer-resources/ng2-translate/

everything run , I can take json format but not print output

en.json

{
    "HELLO": "hola",
    "hi":"sa"
  }

.ts constructor;

 constructor(public navCtrl: NavController, public navParams: NavParams, public translate: TranslateService) {
    translate.setDefaultLang('en');
  }

.html block;

<div style="width: 100%;">           
        <p class="baslik">ACCOUNT</p>
      <button ion-item>
          <ion-label>{{ 'hi' | translate }}</ion-label>
      </button>
      <button ion-item>
          <ion-label>{{ 'hi' | translate }}</ion-label>
      </button>
  </div>

but output;

hi

when add button click event , this code block;

this.translate.use('en').subscribe(
      value => {
        // value is our translated string
        console.log(value);
      }

en.json return log;

alfredson · Accepted Answer · 2017-10-06 12:18:38Z

1

I followed the tutorial you provided and could reproduce your problem.

I had also a look in the official documentation of the ngx-translate repository on github and there is a difference to your tutorial.

In the tutorial they are using the Http class of the Angular Http module to load the files:

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

In the official documentation they are using the HttpClient class of the Angular common module. Change the following in your App Module:

import { HttpClientModule, HttpClient } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

There is a comment in the official documentation

NB: if you're still on Angular <4.3, please use Http from @angular/http with [email protected].

answered Oct 6, 2017 at 12:18

alfredson

2411 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

cetinDev Over a year ago

I have added all code from tutorial , but return thats output

alfredson Over a year ago

Which angular version are you using?

cetinDev Over a year ago

4.1.3 ----------------

cetinDev Over a year ago

I used http instead of httpClient

alfredson Over a year ago

Use @ngx-translate/http-loader version 0.1.0, the latest version of @ngx-translate/core and Http instead of HttpClient. That should fix your problem

|

Joe · Accepted Answer · 2017-10-06 11:57:01Z

I'm not familiar with the translation framework you're using but it looks from their documentaiton that you want to use a custom translation definition, but you never call:

translate.setTranslation('en', myTranslation);

where myTranslation is your object.

The 'en' in your code that you're setting as the default is a string (it's in quotes), and looks to be some kind of identifier that the translation service uses to decide what the fallback language is:

Methods:

setDefaultLang(lang: string): Sets the default language to use as a fallback

You want:

setTranslation(lang: string, translations: Object, shouldMerge: boolean = false): Manually sets an object of translations for a given language, set shouldMerge to true if you want to append the translations instead of replacing them

Collectives™ on Stack Overflow

ngx-translate output return without translate

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related