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?
Try to put your component in declarations like:
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule,
],
declarations: [YourComponent],
}
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.
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.