I have an issue with ngx or ng2 translate (at that point I’ll take anything that works).
I’m trying to implement a translation in my app, but I keep getting this message:
The pipe 'translate' could not be found
I feel like I’ve tried everything. My app.module.ts:
import { HttpClient } from '@angular/common/http';
import {ErrorHandler, LOCALE_ID, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BrowserModule} from '@angular/platform-browser';
import {MyApp} from './app.component';
import {AuthProvider} from '../providers/auth/auth.provider';
import {Camera} from '@ionic-native/camera';
import {HttpModule} from '@angular/http';
import {SunMoonProvider} from '../providers/sun-moon/sun-moon.provider';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule,
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages: true
}),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
{provide: LOCALE_ID, useValue: "en-GB"},
BLE,
SunMoonProvider,
]
})
export class AppModule {
}
My page.ts:
import { TranslateService } from '@ngx-translate/core';
import {AfterViewInit, Component, Input} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
@Component({
selector: 'article-thumbnail',
templateUrl: 'article-thumbnail.html'
})
export class ArticleThumbnailComponent implements AfterViewInit {
@Input() article: any;
constructor(public navCtrl: NavController, public navParams: NavParams, translate:TranslateService) {
translate.use('en_GB');
}
ngAfterViewInit() {
}
goToArticle() {
this.navCtrl.push('ArticlePage', {article: this.article});
}
}
My page’s HTML:
<div tappable (click)="goToArticle()">
<img class="more" src="./assets/icon/more.png">
<ion-grid>
<ion-row align-items-center>
<ion-col col-12 align-self-center>
<h1 class="category">{{article.category}}</h1>
<h1 class="title">{{article.title}}</h1>
<h1 class="title">{{'HELLO' | translate}}</h1>
</ion-col>
</ion-row>
</ion-grid>
</div>