7

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.

3
  • Import TranslateModule (do not call TranslateModule.forRoot) in tabs.page.module.ts Mar 5, 2019 at 10:32
  • @BunyaminCoskuner. Thank you for the answer. It worked. Mar 5, 2019 at 10:37
  • @BunyaminCoskuner. Can you add the answer for clear details for everyone and so that I can mark it. Mar 5, 2019 at 10:38

3 Answers 3

13

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
   ] 
   ...

5
  • In imports, I have added like this: TranslateModule.forChild() Mar 5, 2019 at 10:43
  • You can call that but you don't have to Mar 5, 2019 at 10:46
  • Okay. Thank you for the answer. It has solved my query. Mar 5, 2019 at 10:46
  • Ionic 5, that answer is what is missing from the doc. Feb 20, 2020 at 19:25
  • nicely explained
    – Naga
    May 2, 2020 at 20:59
1

Try adding TranslateModule to shared.module file:

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

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

export class SharedModule {}
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.