Template parse: The pipe could not be found

Question

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?

Please create a reproduction of the problem to debug. The template-content you have shown seems irrelevant since the pipe mentioned in the error is `amDateFormat` not `amTimeAgo`. — amal, Nov 08 '17 at 14:32
That was a copy/pasting error from when I was trying to debug and use other pipes from angular2-moment module. Example above is throwing the error when trying to use | amDateFormat:'LL' pipe also. — coler-j, Nov 08 '17 at 15:28

score 10 · Accepted Answer · answered Nov 09 '17 at 00:50

10

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

answered Nov 09 '17 at 00:50

coler-j

1,791
1
27
57

score 4 · Answer 2 · edited Aug 04 '21 at 18:01

4

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

import { MomentModule } from "ngx-moment";

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

Worked for me

edited Aug 04 '21 at 18:01

Sathiamoorthy

8,831
9
65
77

answered Nov 26 '19 at 15:52

Sam

125
1
4

score 3 · Answer 3 · answered Jul 04 '19 at 21:11

3

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

answered Jul 04 '19 at 21:11

carbonmonoxide

41
1
4

score 3 · Answer 4 · answered Nov 20 '19 at 19:37

3

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

Hope it helps you.

answered Nov 20 '19 at 19:37

iconique

1,115
13
16

Template parse: The pipe could not be found

4 Answers4

Linked