The pipe 'async' could not be found

I am trying to build a simple blog with Angular 2 and Firebase and I am having issues using async pipe in a component. I get the error in the console.

> zone.js:344Unhandled Promise rejection: Template parse errors: > The pipe 'async' could not be found (" >

[ERROR ->]{{ (blog.user | async)?.first_name }}

import {Component, Input} from "@angular/core";

@Component({
  selector: 'blog-component',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
})

export class BlogComponent {
  @Input() blog;
}

<h1 class="article-title">{{ blog.title }}</h1>
<p>{{ (blog.user | async)?.first_name }}</p>

import { Component } from '@angular/core';
import { BlogService } from "./services/services.module";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private blogService: BlogService) {}
  articles = this.blogService.getAllArticles();
}

<article *ngFor="let article of articles | async">
  <blog-component [blog]="article"></blog-component>
</article>

import {Injectable} from "@angular/core";
import {AngularFire} from "angularfire2";
import {Observable} from "rxjs";
import "rxjs/add/operator/map";

@Injectable()
export class BlogService {
  constructor(private af: AngularFire) { }

  getAllArticles(): Observable<any[]> {
    return this.af.database.list('articles', {
      query: {
        orderByKey: true,
        limitToLast: 10
      }
    }).map((articles) => {
      return articles.map((article) => {
        article.user = this.af.database.object(`/users/${article.user_id}`);
        return article;
      });
    });
  }
}

@NgModule.declarations aren't inherited by child modules. If you need pipes, directives, components from a module, the module should be imported into your feature module.

The module with all the core pipes is CommonModule from @angular/common

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [ CommonModule ]
})
class BlogModule {}

The reason it works in the app.component is because you are most likely importing BrowserModule into the AppModule. BrowserModule re-exports CommonModule, so by importing BrowserModule, it's like also importing CommonModule.

It's also worth noting that CommonModule has the core directives also, like ngFor and ngIf. So if you have a feature module that uses those, you will also need to import the CommonModule into that module.

If the component at the route you're loading is not declared (via declarations:[]) then you will also get this type of error.

When adding a new component in Angular 9 I had to restart the development server possibly also because of HMR:

ng serve --hmr

Without this the application simply did not load all the dependencies and issued this error.

If you tried all above mentioned answers but it is not working means , Just do npm run start it will work , In my case after some compilation issue this error came.

Component you're trying to load is not declared in the declarations array then you will get this type of error, in my case this was shipping component, like mentioned below:

If you have upgraded to Angular 6 or 7, make sure in your tsconfig.ts turn off enableIvy in angularCompilerOptions

e.g:

angularCompilerOptions: {
enableIvy : false; // default is true
}

That solved my issue, may be it'll save someone else time too.

I found the same problem some times when changing multiple imports at once.

My app worked back again just fine without changing any code but restarting ng start. One of the surprises of coding until late.

Normally this drives me crazy as I was checking all the imports, and the answer of the "Common Module" normally makes sense, but just in case someone finds the same silly situation I faced, now you know what to do.

In my case the input to the pipe was null. So in the case of the question make sure that blog.user in <p>{{ (blog.user | async)?.first_name }}</p> is not null.

edit: I have been doing my own project, and I have noticed that this error might occur when code has any kind of build error, for example unclosed html tag like <label>foo<label>. After that, the only way I know, is to just reset the entire server. It is annoying and shouldn't be like that.

I got this error when I had an empty (actually commented) function implementation in my component

in html: <div (click)="onClickFoo()">

in .ts

onClickFoo() {
     // this.router.navigate([...])
}

You can also get the same error if you are using multiple modules in your app.module.ts

import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';

// module 1
@NgModule({ exports: [MatCardModule] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Then if you generate a component using the command:

ng generate component example

It gets added to the first module, instead of the second one:

import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';
import { ExampleComponent } from './example/example.component';

// module 1
@NgModule({ exports: [MatCardModule], declarations: [ExampleComponent] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Which will create the same error! Moving the component to the AppModule will fix it.

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

If you're getting this in an optimized production build it could be due to tree shaking, especially if you're using sideEffects: false. This is now an encouraged setting in Angular 10 via ng new --strict.

Still have yet to figure out how to fix my project, but setting it to true fixed it for me for now.

I faced this issue when I tried to use the async pipe in a component used as a dialog. I solved this by declaring the component in the immediate module (I used lazy loading). The app module if you are not.