How to fix Angular Error: NG0302: The pipe 'async' could not be found in the '...' component
Problem:
In the browser console, you see an error message such as
core.mjs:6677 ERROR Error: NG0302: The pipe 'async' could not be found in the '_MyComponent' component. Verify that it is included in the '@Component.imports' of this component. Find more at https://angular.dev/errors/NG0302
at getPipeDef (core.mjs:29500:15)
at Module.ɵɵpipe (core.mjs:29441:19)
at MyComponent_Template (my.component.html:1:1)
at executeTemplate (core.mjs:11621:9)
at renderView (core.mjs:12828:13)
at renderComponent (core.mjs:12774:5)
at renderChildComponents (core.mjs:12876:9)
at renderView (core.mjs:12856:13)
at renderComponent (core.mjs:12774:5)
at renderChildComponents (core.mjs:12876:9)
Solution:
This issue is typically related to standalone components.
Open the .ts
source code of your component and add AsyncPipe
to its imports:
/* ... */
import { AsyncPipe } from '@angular/common';
@Component({
selector: 'app-my-component',
standalone: true,
imports: [
/* ...*/
AsyncPipe,
],
templateUrl: './my.component.html',
styleUrl: './my.component.scss'
})
export class MyComponent {
In case you’re not using standalone components, add AsyncPipe
to the imports
of whatever module your component is used in, intead