Angular Async Pipe Could Not Be Found: Complete Troubleshooting Guide

The "pipe async could not be found" error occurs when Angular's template compiler cannot locate the AsyncPipe declaration, which requires importing CommonModule in NgModule-based apps or AsyncPipe directly in standalone components.

The angular async pipe is essential for subscribing to Observable and Promise values directly in templates. When this built-in pipe is missing from the compilation context, Angular throws a runtime template error that halts rendering. According to the angular/angular source code, this issue stems from how the framework registers pipes through module declarations and component-level imports.

Common Causes of the Async Pipe Error

Missing CommonModule in NgModule Applications

In traditional NgModule-based architectures, AsyncPipe is declared and exported by CommonModule from @angular/common. If your module's imports array omits CommonModule, the Angular compiler has no registration for the pipe, triggering the exact error message: Error: The pipe 'async' could not be found.

Standalone Components Without Explicit Imports

Standalone components do not inherit pipes from any NgModule. Each standalone component must explicitly list AsyncPipe in its imports array, or import CommonModule which re-exports the pipe. Without this direct registration, the template parser cannot resolve the pipe binding.

Template Typos

The compiler looks for a pipe named exactly as written in the template. Variations like asin, asyc, or asyncs will cause the same error because Angular cannot match the identifier to the registered AsyncPipe class.

Lazy-Loaded Feature Modules

Lazy-loaded feature modules maintain their own compilation context independent of the root module. If a lazy module imports components using the angular async pipe but fails to import CommonModule, the error appears at runtime when navigating to that specific route.

How AsyncPipe Is Implemented in Angular Source

The AsyncPipe implementation resides in packages/common/src/pipes/async_pipe.ts within the angular/angular repository. This class implements PipeTransform and handles subscription logic for both Observable and Promise values, managing unsubscribe lifecycle hooks automatically. The pipe is re-exported through packages/common/src/pipes/index.ts, making it available via the @angular/common public API barrel file.

In the source, AsyncPipe is listed in the exports array of CommonModule defined in packages/common/src/common.ts, which is why importing CommonModule makes the pipe available to all components declared in that module.

Solutions and Code Examples

Fixing NgModule-Based Components

Add CommonModule to your module's imports array to register AsyncPipe for all components in that module.

// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {AppComponent} from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CommonModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

<!-- app.component.html -->
<div *ngIf="data$ | async as data">
  {{ data.title }}
</div>

Fixing Standalone Components

Import AsyncPipe directly from @angular/common into the component's imports array. This approach enables tree-shaking of unused common module exports.

import {Component, ChangeDetectionStrategy} from '@angular/core';
import {AsyncPipe} from '@angular/common';
import {Observable} from 'rxjs';

@Component({
  standalone: true,
  selector: 'my-widget',
  template: `<p>{{ timer$ | async }}</p>`,
  imports: [AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyWidget {
  timer$: Observable<number> = new Observable(observer => {
    let n = 0;
    setInterval(() => observer.next(++n), 1000);
  });
}

Fixing Lazy-Loaded Feature Modules

Ensure CommonModule appears in the lazy module's imports to provide AsyncPipe within that feature's compilation scope.

// feature.module.ts
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FeatureComponent} from './feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
})
export class FeatureModule {}

Summary

• The error indicates missing import registration for AsyncPipe in the component's compilation context
• NgModule apps: Import CommonModule from @angular/common in the module containing the template
• Standalone components: Import AsyncPipe directly into the component's imports array
• Lazy-loaded modules: Each feature module requires its own CommonModule import
• Verify template syntax uses exactly | async without typos

Frequently Asked Questions

Why do I get "pipe async could not be found" in a standalone component?

Standalone components do not inherit pipes from any NgModule. You must explicitly add AsyncPipe to the component's imports array, or import CommonModule which re-exports the pipe. This ensures the Angular compiler can resolve the pipe during template compilation.

Do I need to import CommonModule in every lazy-loaded module?

Yes. Each lazy-loaded module maintains its own compilation scope separate from the root module. If templates within that module use the angular async pipe, you must import CommonModule (or AsyncPipe directly) in that specific module's imports array.

Can I use AsyncPipe without importing CommonModule?

Yes, in standalone components you can import AsyncPipe directly from @angular/common instead of the entire CommonModule. This approach tree-shakes unused common module exports while still providing the pipe functionality.

Where is the AsyncPipe source code located?

According to the angular/angular repository, the implementation is in packages/common/src/pipes/async_pipe.ts, with public exports defined in packages/common/src/pipes/index.ts. The pipe is registered in CommonModule within packages/common/src/common.ts.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}