Jak opravit chybu Angular: NG0302: The pipe 'async' could not be found in the '...' component

Problém:

V browser console vidíte chybovou zprávu jako

pipe_async_fix.ts

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)

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)

Řešení

Tento problém je typicky spojen se standalone components.

Otevřete .ts zdrojový kód vaší komponenty a přidejte AsyncPipe do jejích imports:

async_pipe_import.ts

/* ... */
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 {

/* ... */
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 {

V případě, že nepoužíváte standalone components, přidejte AsyncPipe do imports modulu, ve kterém se vaše komponenta používá.