Issue with i18n (ngx/ng2 translate) in ionic 3, Angular 4

@EnzoLR wrote:

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>
      </ion-col>
    </ion-row>
  </ion-grid>
</div>

Posts: 1

Participants: 1

Read full topic