Angular Template parse errors: The pipe could not be found

Question

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    HttpModule,
    BrowserModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

about.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class AboutPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public translate: TranslateService) {
    this.translate.setDefaultLang('en');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AboutPage');
  }

}

about.html

<ion-header>

  <ion-navbar>
    <ion-title>{{ 'HELLO' | translate }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

Error:

Error: Uncaught (in promise): Error: Template parse errors: The pipe 'translate' could not be found ("

{{ [ERROR ->]'HELLO' | translate }}

"): ng:///AboutPageModule/AboutPage.html@3:18 Error: Template parse errors: The pipe 'translate' could not be found ("

{{ [ERROR ->]'HELLO' | translate }}

"): ng:///AboutPageModule/AboutPage.html@3:18 at syntaxError (http://localhost:8100/build/vendor.js:82250:34) at TemplateParser.parse (http://localhost:8100/build/vendor.js:106433:19) at JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:116386:37) at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:116361:23) at http://localhost:8100/build/vendor.js:116262:62 at Set.forEach () at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:116262:19) at http://localhost:8100/build/vendor.js:116132:19 at Object.then (http://localhost:8100/build/vendor.js:82239:77) at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:116131:26) at c (http://localhost:8100/build/polyfills.js:3:19752) at c (http://localhost:8100/build/polyfills.js:3:19461) at http://localhost:8100/build/polyfills.js:3:20233 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5114:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) at o (http://localhost:8100/build/polyfills.js:3:7894)

Same code working like charm in root home page. Plaease help me How can I solve this issue?

Solution 1

I guess you should add TranslateModule to imports array of your AboutPageModule:

@NgModule({
  imports: [
    ...,
    TranslateModule
  ],
  declarations: [AboutPage],
  ...
})
export class AboutPageModule {}

---

If you have shared module then you can add this module there

@NgModule({
  ...,
  exports: [
    ...,
    TranslateModule
  ]
})
export class SharedModule {}

and after that the following should also work:

@NgModule({
  imports: [
    ...,
    SharedModule
  ],
  declarations: [AboutPage],
  ...
})
export class AboutPageModule {}

See also:

• Angular 2 Use component from another module

Solution 2

There are two things,

(i) you should import TranslateModule inside your submodules as well.

(ii) use HttpClientModule instead of HttpModule

import { HttpClient, HttpClientModule } from "@angular/common/http"

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

Solution 3

Don't forget to export the Pipe in your TranslateModule