angular
After updating to Angular 21 – ng serve fails with NG8004 (AsyncPipe not found) (#32026)
Command
add
Is this a regression?
- [x] 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
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.
Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.
If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.