After updating to Angular 21 – ng serve fails with NG8004 (AsyncPipe not found) (#32026)

[vsarangan]

Command

add

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No, this is happening after angular 21 upgrade, suspecting third party package

Description

NG8004: No pipe found with name 'async'.
To fix this, import the "AsyncPipe" class from "@angular/common" and add it to the "imports" array of the module declaring the component. [plugin angular-compiler]

src/app/core-popup/session-timeout/session-timeout.component.html:1:65:
  1 │ ...class="mx-rw-session-timeout-container" [dir]="direction$ | async">

Note: Same is working fine in different application

Minimal Reproduction

NG8004: No pipe found with name 'async'.
To fix this, import the "AsyncPipe" class from "@angular/common" and add it to the "imports" array of the module declaring the component. [plugin angular-compiler]

src/app/core-popup/session-timeout/session-timeout.component.html:1:65:
  1 │ ...class="mx-rw-session-timeout-container" [dir]="direction$ | async">

Exception or Error

Your Environment

Angular CLI       : 21.0.1
Angular           : 21.0.2
Node.js           : 24.11.1
Package Manager   : npm 11.6.2
Operating System  : win32 x64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/architect         │ 0.2100.1          │ 0.2100.1          │
│ @angular-devkit/build-angular     │ 21.0.1            │ 21.0.1            │
│ @angular/animations               │ 21.0.2            │ 21.0.2            │
│ @angular/cdk                      │ 21.0.1            │ 21.0.1            │
│ @angular/cli                      │ 21.0.1            │ 21.0.1            │
│ @angular/common                   │ 21.0.2            │ 21.0.2            │
│ @angular/compiler                 │ 21.0.2            │ 21.0.2            │
│ @angular/compiler-cli             │ 21.0.2            │ 21.0.2            │
│ @angular/core                     │ 21.0.2            │ 21.0.2            │
│ @angular/elements                 │ 21.0.2            │ 21.0.2            │
│ @angular/forms                    │ 21.0.2            │ 21.0.2            │
│ @angular/material                 │ 21.0.1            │ 21.0.1            │
│ @angular/platform-browser         │ 21.0.2            │ 21.0.2            │
│ @angular/platform-browser-dynamic │ 21.0.2            │ 21.0.2            │
│ @angular/router                   │ 21.0.2            │ 21.0.2            │
│ @angular/service-worker           │ 21.0.2            │ 21.0.2            │
│ ng-packagr                        │ 21.0.0            │ 21.0.0            │
│ rxjs                              │ 7.8.2             │ 7.8.2             │
│ typescript                        │ 5.9.2             │ 5.9.2             │
│ zone.js                           │ 0.15.1            │ 0.15.1

Anything else relevant?

No response

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.