title: The pipe 'translate' could not be found error is showing In Ionic 4
body: <p>I am working in my Ionic 4 App and I have installed the <code>ngx-translate</code> plugin. It is working fine in <code>app.component.html</code> but in <code>tabs.page.html</code> it is showing the error.</p>
  
  <blockquote>
    <p>The pipe 'translate' could not be found</p>
  </blockquote>
  
  <p>This is my <strong>app.component.html</strong>:</p>
  
  <pre><code>&lt;ion-list class="mylist22" color="myheader"&gt;
      &lt;ion-item color="myheader"&gt;
          &lt;ion-label&gt;Gender&lt;/ion-label&gt;
          &lt;ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()'&gt;
              &lt;ion-select-option value="en" selected&gt;English&lt;/ion-select-option&gt;
              &lt;ion-select-option value="ar"&gt;Arabic&lt;/ion-select-option&gt;
          &lt;/ion-select&gt;
      &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>In this view, I have the language select box.</p>
  
  <p>This is my <strong>app.component.ts</strong>:</p>
  
  <pre><code>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(() =&gt; {
        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);
      }
    }
  }
  </code></pre>
  
  <p>This is my <strong>app.module.ts</strong>:</p>
  
  <pre><code>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]
        }
    }) ],
  })
  </code></pre>
  
  <p>In the <code>app.component.html</code>, it is working fine but in the <code>tabs.pahe.html</code> it is not working.</p>
  
  <p>This is in <strong>tabs.page.html</strong>:</p>
  
  <pre><code>&lt;ion-label&gt;{{ 'ACCOUNT_TAB_LAB' | translate }}&lt;/ion-label&gt;
  </code></pre>
  
  <blockquote>
    <p>Error: The pipe 'translate' could not be found.</p>
  </blockquote>
  
  <p>Any help is much appreciated.</p>