While working in an Angular 13+ application, you may come across the error in your HTML file saying “No pipe found with name ‘async'”. That can be an error for any other pipe also such as “No pipe found with name ‘date'” or “No pipe found with name ‘currency'”.

for example:

<h3> {{  userName$ | async }} </h3>

What is the Error?

No pipe found with name pipe name

The Reason for “No pipe found with name ‘async'” Error Message:

The error may arise in couple of scenarios.

Scenario 1:

You might have created your component manually or using any Visual Studio Code extension such as Angular Snippets but forgot to add the component to the module’s declarations array. Since this extension do not add the component by default to the module (just like angular cli), you will get the error as the angular’s built-in pipes or directives will be available to your template only when you add it to its declarations array.

Solution: Make sure that you have added your component to the declarations array of your module.

Scenario 2:

You have created the component and added to the module, but still you are getting the error. In this scenario, most probably you might have added your component to a sub module. All the built-in pipes and directives will be available to the root module through Browser Module which will be added to the imports array by default when we create the application through angular cli.

When we create a sub or lazy module, we need to add the Common Module to make use of the built-in pipes. Note that, we add Browser Module only to the root module and we do not add it to the sub modules. The Common Module can be imported from @angular/common folder

Solution: Make sure that your module have Browser Module (if root module) or Common Module (if sub module) in its imports array.

For Root Module:

imports: [

For Sub module:

First import the module, then add it to the imports array

import {CommonModule } from '@angular/common';
imports: [