The pipe 'translate' could not be found error is showing In Ionic 4

Question

I am working in my Ionic 4 App and I have installed the ngx-translate plugin. It is working fine in app.component.html but in tabs.page.html it is showing the error.

The pipe 'translate' could not be found

This is my app.component.html:

<ion-list class="mylist22" color="myheader">
    <ion-item color="myheader">
        <ion-label>Gender</ion-label>
        <ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()'>
            <ion-select-option value="en" selected>English</ion-select-option>
            <ion-select-option value="ar">Arabic</ion-select-option>
        </ion-select>
    </ion-item>
</ion-list>

In this view, I have the language select box.

This is my app.component.ts:

import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  languageSelected: any = 'en';
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private translate: TranslateService
  ) {
    this.translate.addLangs(['en', 'ar']);
    this.translate.setDefaultLang('en');
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.setLanguage();
    });
  }

  setLanguage() {
    const defaultLanguage = this.translate.getDefaultLang();
    if (this.languageSelected) {
      console.log(this.languageSelected);
      this.translate.setDefaultLang(this.languageSelected);
      this.translate.use(this.languageSelected);
    } else {
      this.languageSelected = defaultLanguage;
      this.translate.use(defaultLanguage);
    }
  }
}

This is my app.module.ts:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  }) ],
})

In the app.component.html, it is working fine but in the tabs.pahe.html it is not working.

This is in tabs.page.html:

<ion-label>{{ 'ACCOUNT_TAB_LAB' | translate }}</ion-label>

Error: The pipe 'translate' could not be found.

Any help is much appreciated.

Rennie

Import TranslateModule (do not call TranslateModule.forRoot) in tabs.page.module.ts – Weston

@BunyaminCoskuner. Thank you for the answer. It worked. – Rennie

@BunyaminCoskuner. Can you add the answer for clear details for everyone and so that I can mark it. – Rennie

Answer 1

You need to import TranslateModule in every module in which you want to use translate pipe.

import { TranslateModule } from '@ngx-translate/core';

   ...
   imports: [
     TranslateModule // do not call forRoot from any module other than AppModule
   ] 
   ...

Weston

In imports, I have added like this: TranslateModule.forChild() – Rennie

You can call that but you don't have to – Weston

Okay. Thank you for the answer. It has solved my query. – Rennie

Ionic 5, that answer is what is missing from the doc. – Weltanschauung

nicely explained – Biography

Answer 2

Try adding TranslateModule to shared.module file:

import { TranslateModule } from "@ngx-translate/core";

@NgModule({
  imports: [TranslateModule, ],
  
  exports: [TranslateModule],
  providers: [],
})

export class SharedModule {}

Ramsgate

Answer 3

In my case the error message was a bit confusing. During my code merge, the component got deleted from app.module.ts declarations. The issue was resolved after component was added to app.module.ts declarations.

Napper