CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2
cetinDev
cetinDev

Reputation: 319

ngx-translate output return without translate

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

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;

enter image description here

Upvotes: 0

Views: 1037

Answers (2)

alfredson
alfredson

Reputation: 241

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].

Upvotes: 1

Joe
Joe

Reputation: 7014

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

Upvotes: 1

Related Questions