Angular "No pipe found with name 'async'

Question

I have the following Angular typescript and html template and it prompts the captioned error when build.

Typescript:

import { ChangeDetectionStrategy, Component, Inject, OnDestroy } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
import { select, Store } from '@ngrx/store';
import { Observable, BehaviorSubject } from 'rxjs';
import { tap, map } from 'rxjs/operators';
 
import {
  AppState,
  loadStages,
  searchStages,
  addCreatedStaging,
  addEditedStaging,
  addDeletedStaging,
  sendStagingList,
  resetStaging,
  clearStagingList,
  getStages,
  getStagesLoaded,
  getStagesLoading,
  getStagesSearch,
  getStagesQueue,
  getRateTypes,
  getCurveNamesByCurrency,
  getTenors,
  getPeriodicity,
  getAccrualTypes,
  getAmortizingTypes,
  getAmortizingPeriodicity,
  getExistingBeginDates
} from 'src/app/@store';
import {
  Stage,
  RateType,
  Periodicity,
  AccrualType,
  AmortizingType,
  SearchType,
  StagingLoanDetailActions,
  DictionaryObject
} from 'src/app/common';
import { environment } from 'src/environments/environment';
import { ColDef } from 'ag-grid-community';
import { MaskPipe } from 'ngx-mask';
import { DatePipe, CommonModule, AsyncPipe } from '@angular/common';
 
@Component({
  selector: 'app-staging-loan-details-popup',
  templateUrl: './staging-loan-details-popup.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class StagingLoanDetailsPopupComponent implements OnDestroy {
  ......
  stagingLoanDetailQueue$: Observable<any>;
  backdropClickCheck$: Observable<unknown>;
 
  isDirty: boolean;
  contractReference: string;
  instrumentType: string;
  queue: { create_list: Stage[]; update_list: Stage[]; delete_list: Stage[] };
  ......
  constructor(
    @Inject(MAT_DIALOG_DATA) public dialogData: any,
    public dialogRef: MatDialogRef<StagingLoanDetailsPopupComponent>,
    private store: Store<AppState>,
    private maskPipe: MaskPipe,
    private datePipe: DatePipe
  ) {
    ......
    this.stagingLoanDetailQueue$ = this.store.pipe(
      select(getStagesQueue),
      tap(queue => (this.queue = queue))
    );
    this.backdropClickCheck$ = this.dialogRef
      .backdropClick()
      .pipe(map((event: MouseEvent) => this.checkForClose(event, this.queue, this.isDirty)));

And in the app module that declare this typescript, I have imported the CommonModule in the NgModule section too.

However, it still prompt the error:

Error: src/app/modules/create-simulation/dialogs/staging-loan-details-popup/staging-loan-details-popup.component.html:57:32

error NG8004: No pipe found with name 'async'. 57 {{ stagingLoanDetailQueue$ | async }} ~~~~~ src/app/modules/create-simulation/dialogs/staging-loan-details-popup/staging-loan-details-popup.component.ts:49:16 49 templateUrl: './staging-loan-details-popup.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component StagingLoanDetailsPopupComponent.

I searched for solution and asked ChatGPT as well but still could not solve this error. Hope anyone can help. Actually, this is just one of the error it prompts. Basically, every async in the html template prompt the same error when build.

Naren Murali · Accepted Answer · 2025-04-28 03:09:37Z

3

If your component is standalone (Default in Angular 19) then you need to add the AsyncPipe or CommonModule (Contains angular pipes and directives) to the imports array.

@Component({
  selector: 'app-staging-loan-details-popup',
  templateUrl: './staging-loan-details-popup.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [AsyncPipe],
})
export class StagingLoanDetailsPopupComponent implements OnDestroy {

If you are sure your component is not standalone, then add the AsyncPipe or CommonModule to the imports array of the module that contains this component, in it's declarations array.

@NgModule({
  imports: [
    ...
    AsyncPipe,
    // CommonModule,
    ...
  ],
  declarations: [
    ...
    StagingLoanDetailsPopupComponent,
    ...
  ],
})
export class SomeModule { }

answered Apr 28 at 3:09

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

samuel wong Apr 28 at 3:20

It is not standalone and I already did the import.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule, AsyncPipe } from '@angular/common'; import { BrowserModule } from '@angular/platform-browser'; ...... import { StagingLoanDetailsPopupComponent } from './dialogs/staging-loan-details-popup/staging-loan-details-popup.component';   @NgModule({   imports: [     BrowserModule,     CommonModule,     AsyncPipe,     ......   ],   declarations: [StagingLoanDetailsPopupComponent] }) export class CreateSimulationModule {}

Naren Murali Apr 28 at 3:22

@samuelwong delete .angular folder and restart the dev server

Collectives™ on Stack Overflow

Angular "No pipe found with name 'async'

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related