I have implemented ngTranslate using a shared module that i will import in my other pages.
The translate pipe is working correctly in IonicPage where i import them in the module.
However when using in a component that is not a IonicPage (doesn’t have his own module file), the translate pipe is not found.
I have tried to also import the share module inside the app.module.ts, but i still have the same error.
I have seen solutions using PLATFORM_PIPES, but which is deprecated now.
Here is my implementation :
shared.module.ts :
import {NgModule } from '@angular/core';
import {MyIcons} from '../components/common/myIcons';
import { IonicApp, IonicModule } from 'ionic-angular';
import { TranslateModule} from '@ngx-translate/core';
@NgModule({
declarations: [
MyIcons,
// OverlayDetail
],
imports : [IonicModule],
exports : [MyIcons, TranslateModule]
})
export class SharedModule {}
app.module.ts :
@NgModule({
declarations: [
SuperHoteApp
],
imports: [
BrowserModule,
IonicModule.forRoot(SuperHoteApp, {tabsHideOnSubPages: true, platforms: { ios: { scrollAssist: false, autoFocusAssist: false }, android : {scrollAssist: false, autoFocusAssist: false} }}),
IonicStorageModule.forRoot(),
SharedModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}})
],
bootstrap: [IonicApp],
entryComponents: [
SuperHoteApp
],
providers: [
ScreenOrientation,
StatusBar,
{
provide: ErrorHandler,
useClass: IonicErrorHandler},
{
provide: HttpInterceptor,
useFactory: HttpFactory,
deps: [ XHRBackend, RequestOptions]
}
],
exports : [SharedModule]
})
export class AppModule {
constructor(public config: Config) {
}
}
translateLoader.ts
import { Http } from '@angular/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}