Angular datepipe cannot be found

Question

I want to use the DatePipe in HTML

{{ timeslot | date }}

but I get the error

error NG8004: No pipe found with name 'date'

My app.module.ts imports the common module

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
     CommonModule,
  ],
  declarations: [],
}

What I am doing wrong?

Does this answer your question? [Angular - No pipe found with name](https://stackoverflow.com/questions/62161219/angular-no-pipe-found-with-name) — Deepak A, Sep 08 '21 at 09:58

score 7 · Answer 1 · answered Sep 08 '21 at 09:50

7

Try to put your component in declarations like:

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
     CommonModule,
  ],
  declarations: [YourComponent],
}

answered Sep 08 '21 at 09:50

Georges Feungap

456
3
8

component should always be declared before used – Georges Feungap Dec 10 '21 at 20:45

Jake · Answer 2 · 2021-09-08T10:38:47.943

7

All I want to do is use Angular pipe in HTML.

{{ timeslot | date }}

I spent 2 hours on this issue troubleshooting and Google searching the error message,

error NG8004: No pipe found with name 'date'.

only to get the same repeated advice for adding CommonModule to imports, or adding to providers then inject into the Component and Service files.

To help those who made the same silly mistake as I did, please check you have added your component into the app.module.ts declarations first. You don't even need to do any thing else (import CommonModule whatsoever) to use Angular pipes.

edited Sep 08 '21 at 10:38

answered Sep 08 '21 at 10:34

Jake

11,273
21
90
147

1

that's why is better to create components with angular-cli instead of manually ;) – Panagiotis Bougioukos Sep 08 '21 at 10:36
@PanagiotisBougioukos I did use the cli, but I inevitable removed the component while editing the app.module.ts file.... sad day for me. – Jake Sep 08 '21 at 10:38
spent like 2 hrs on this issue with another person and now this saved my day!! – digitally_inspired Jan 25 '23 at 15:15

score 1 · Answer 3 · answered Apr 12 '22 at 15:09

1

For larger, more complex apps, make sure the whole dependency tree is correctly imported.

I suffered this error because a piece was missing in a parent module file. Specifically, the component with the error did not have its declaring module imported into the main app module. Everything else was correct: imported the CommonModule from Angular (for the date pipe), declared the erring module in its own module, exported the erring module from its own module.

answered Apr 12 '22 at 15:09

Zarepheth

2,465
2
32
49

This happened to me. I removed a component and the connected module was not compile. All I had to do was remove the reference to the deleted component in the module and everything built – Ben Anderson Mar 31 '23 at 15:43

Angular datepipe cannot be found

3 Answers3

Linked