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?
 
     
     
     
     
    
 
     
     
     
     
     
     
     
     
     
     
     
     
     
    