158

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 }}

"): BlogComponent@6:3 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: The pipe 'async' could not be found ("

blog.component.ts

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

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

export class BlogComponent {
  @Input() blog;
}

blog.component.html

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

app.component.ts

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();
}

app.component.html

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

blog.service.ts

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;
      });
    });
  }
}

The problem arises only when I try to use async in blog.component.html file. It works if I try to print the user name in app.component.html file. Should I be injecting AsyncPipe in blog.module.ts? How can I get the async working in blog.component.ts?

1
  • 1
    I was missing the component in the child module's declarations, that's why I was getting the error. If that helps someone.
    – Avinash
    Commented Jul 16, 2021 at 9:12

18 Answers 18

247

@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.

4
  • 1
    This answer also fixed my situation where I was using the date pipe in a component that is declared/exported in a shared module. Thanks. Commented Oct 31, 2016 at 18:40
  • In addition to that, reordering @NgModule.imports array declarations solved my issue; hope it helps someone. Commented Aug 6, 2023 at 12:49
  • This is no longer a good practice. we should only import what we need. Like importing AsyncPipe in this case. Commented May 14 at 16:18
  • 1
    I think most people comming here are looking for this: import { AsyncPipe } from '@angular/common'; (for standalone components):
    – jaheraho
    Commented Jun 29 at 9:46
75

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

7
  • 14
    Or a subtle variation of this answer: forgetting to declare the component under test in your TestBed.configureTestingModule call. 🙈
    – Jeroen
    Commented Apr 12, 2021 at 22:14
  • 2
    Thank you. Everyone keeps talking about "You just have to import CommonModule" and nobody ever tells that this is also one of the reasons.
    – Stan
    Commented Jun 9, 2021 at 13:55
  • 4
    Thanks @Jeroen I spent over an hour figuring out why I got this error even though I had imported CommonModule Commented Sep 23, 2021 at 12:55
  • 1
    @StephaneJanicaud Yeah programming is fun, except when it's not 😅
    – Jeroen
    Commented Sep 23, 2021 at 14:08
  • 1
    @Jeroen Yes, another thank you for the article you wrote about OAuth2 + OIDC and SPA, I think it'll also help me a lot with silent refresh issues I may encounter as I use the same library :) Commented Sep 23, 2021 at 15:37
22

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.

2
  • 2
    This can also happen if you rearrange dependent services. For example I had a SavingsService that I split into SavingsService and SavingsUIService. After recompiling I got the real error, which was that the new service wasn't being provided anywhere. So yes this can definitely be a red herring requiring full recompilation Commented Apr 29, 2020 at 20:45
  • 1
    @MikeGledhill I think this is related to the optimizations being performed when using HMR, to prevent reloading of the whole component tree. Most likely the package containing the async pipe is not injected for the new component. Commented Apr 15, 2021 at 13:11
19

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:

enter image description here

1
  • This answer would be better if the image was text instead of an image of text, or even if the text associated with the image was something other than "enter image description here"... Commented Dec 11, 2023 at 16:21
16

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.

2
  • so wierd - but it help me to . probably it restart the angular server in a better way ? Commented Jul 15, 2020 at 17:49
  • 2
    Yes sometimes during a large refactor, this is the only solution... Commented Sep 7, 2020 at 5:57
13

If like me you're developing a standalone component,

I was missing the import

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

@Component({
   selector: 'test',
   standalone: true,
   imports: [
      AsyncPipe
   ],
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
10

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.

8
  • 6
    This does work, but I hope to see a real fix besides disabling core system functionality.
    – Matthew B.
    Commented Jan 16, 2019 at 16:59
  • I was reading somewhere to import CommonModule globally can solve this issue too but I haven't tested yet.
    – Nadeem
    Commented Jan 18, 2019 at 14:52
  • Ivy is not production ready yet, so skip it for angular 7, enable for angular 8 onwards
    – user230910
    Commented Jan 29, 2019 at 1:22
  • 2
    Not the right answer. Disabling Ivy is a workaround. Commented Dec 10, 2019 at 12:50
  • 1
    This is a bandaid masking an underlying issue. It will get rid of the error and not the problem the error is about.
    – Kevin Beal
    Commented Feb 2, 2021 at 20:16
7

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.

1
  • 1
    This was the case for me. I had made a change to a module and had to stop and restart the app. Thanks.
    – adam0101
    Commented Jul 1, 2020 at 12:00
6

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.

3

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([...])
}
2

Basic reason:

The pipe async is exported from the CommonModule and you will get this error when you forgot to import CommonModule either in the module importing your component or in the component itself (if you are in standalone mode.

Advanced one:

Now you might also get the "pipe async not found" if angular, for some reason, has not been able to preload properly the CommonModule.

To check if this is the case, you can force Angular preloading all the modules, changing your code as follows:

// Probably in app-routing.module.ts

import { RouterModule, PreloadAllModules } from '@angular/router';

RouterModule.forRoot([
], {
  // Add this property to your main router module
  preloadingStrategy: PreloadAllModules
})

Then reload the page, if the problem is gone, it very likely means angular is not able to resolve your routes dependencies properly. You could for instance have a module importing its routes but also importing another module itself importing its routes.

1

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 {}
1

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.

1

Previous answers are good (remember to do declarations:[]), but also remember to restart your watch (only if you're using CMD npm-run webpack-development -- -- progress --watch.

0

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.

0

Also, make sure that you're importing the module that the component is declared in.

0

Changing the name of a component could also cause this error, and you can solve this by manually checking the imports in the app module, because it will probably be messed up.

0

If you are using a STANDALONE component, add "CommonModule" to the imports[CommonModule] @Component metadata.

e.g.

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

@Component({
  selector: 'a-standalone-component',
  standalone: true,
  imports: [CommonModule],

  template: `testMsg$ {{testMsg$ | async}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.