I’m using ionic 3 with lazy load and I tried to apply the updated guide information but when I try to translate, the view return the Key name. ex :
<ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>
returns in view HOME.TITLE instead of “This is the title”.
Here is my app.module.ts
//..
//
import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
....
imports: [
IonicStorageModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [Http]
}
})
]
Here is my home.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { Home } from './home';
@NgModule({
declarations: [
Home,
],
imports: [
IonicPageModule.forChild(Home),
TranslateModule.forChild()
],
exports: [
Home
]
})
export class HomeModule {}
Here is my home.ts
import { Component } from '@angular/core';
import { NavController, MenuController, ModalController, IonicPage } from 'ionic-angular';
import {TranslateService} from '@ngx-translate/core';
@IonicPage()
export class Home {
constructor(public navCtrl: NavController, public menuCtrl: MenuController, public modalController: ModalController, translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}
}