Source:  Twitter logo

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?

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

198 users liked answer #0dislike answer #0198
Paul Samsotha profile pic
Paul Samsotha

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

42 users liked answer #1dislike answer #142
Kevin Beal profile pic
Kevin Beal

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.

22 users liked answer #2dislike answer #222
Alexei - check Codidact profile pic
Alexei - check Codidact

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.

13 users liked answer #3dislike answer #313
Sivashankar profile pic
Sivashankar

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.

11 users liked answer #4dislike answer #411
Nadeem profile pic
Nadeem

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:

9 users liked answer #5dislike answer #59
Shoaib Khalil profile pic
Shoaib Khalil

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.

7 users liked answer #6dislike answer #67
Gabriel G. profile pic
Gabriel G.

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.

5 users liked answer #7dislike answer #75
Eli profile pic
Eli

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([...])
}
3 users liked answer #8dislike answer #83
O-9 profile pic
O-9

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 users liked answer #9dislike answer #91
Kim T profile pic
Kim T

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 users liked answer #10dislike answer #101
Simon_Weaver profile pic
Simon_Weaver

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 users liked answer #11dislike answer #110
Digitalennie profile pic
Digitalennie

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).