Template parse: The pipe could not be found

Viewed 8052

I am getting the error:

Template parse errors: The pipe 'amDateFormat' could not be found

Here is my app.module.ts

import { NgModule } from '@angular/core';
...
import { MomentModule } from 'angular2-moment';
...

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    ...
    MomentModule,
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    ...
  ]
})
export class AppModule { }

Then in service-booking-details.ts I am doing the following:

import { Component} from '@angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { MomentModule } from 'angular2-moment';
...    

@IonicPage()
@Component({
  selector: 'page-item-detail',
  templateUrl: 'service-booking-detail.html'
})
export class ServiceBookingDetailPage {
  service: any;
  ...

  constructor(..., navParams: NavParams, ...) {
    this.service = navParams.get('service');
  }
}

Then in the service-booking-detail.html template I am trying to use a pipe from angular2-moment:

<ion-content>

    <ion-card>
      <ion-card-content>
         <p>{{ service.data | amDateFormat:'LL' }}</p>
      </ion-card-content>
    </ion-card>

</ion-content>

It then throws the error "Template parse errors: The pipe 'amDateFormat' could not be found".

How do I import the MomentModule so that I can use it in templates without getting errors?

4 Answers

I was able to get this working by importing this into the specific pages *.module.ts file.

If this exists in the spec file (Jasmine, protractor)

import { MomentModule } from "ngx-moment";

beforeEach(() => {
    
      imports: [ MomentModule ]
  });

Worked for me

In my case moving the MomentModule import from app.module.ts to the same module as component was fixed it.

You can add momentModule to specific page module, or it'd be better to add it on shared module.

Hope it helps you.

Related