title: The pipe 'async' could not be found
body: <p>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.</p>
  <blockquote>
  <p>zone.js:344Unhandled Promise rejection: Template parse errors:
  The pipe 'async' could not be found (&quot;</p>
  </p>
  <p>[ERROR ->]{{ (blog.user | async)?.first_name }}</p>
  <p>&quot;): BlogComponent@6:3 ; Zone:  ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
  The pipe 'async' could not be found (&quot;</p>
  </p>
  </blockquote>
  <p>blog.component.ts</p>
  <pre class="lang-ts prettyprint-override"><code>import {Component, Input} from &quot;@angular/core&quot;;
  
  @Component({
    selector: 'blog-component',
    templateUrl: './blog.component.html',
    styleUrls: ['./blog.component.css'],
  })
  
  export class BlogComponent {
    @Input() blog;
  }
  </code></pre>
  <p>blog.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;h1 class=&quot;article-title&quot;&gt;{{ blog.title }}&lt;/h1&gt;
  &lt;p&gt;{{ (blog.user | async)?.first_name }}&lt;/p&gt;
  </code></pre>
  <p>app.component.ts</p>
  <pre class="lang-ts prettyprint-override"><code>import { Component } from '@angular/core';
  import { BlogService } from &quot;./services/services.module&quot;;
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
    constructor(private blogService: BlogService) {}
    articles = this.blogService.getAllArticles();
  }
  </code></pre>
  <p>app.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;article *ngFor=&quot;let article of articles | async&quot;&gt;
    &lt;blog-component [blog]=&quot;article&quot;&gt;&lt;/blog-component&gt;
  &lt;/article&gt;
  </code></pre>
  <p>blog.service.ts</p>
  <pre class="lang-ts prettyprint-override"><code>import {Injectable} from &quot;@angular/core&quot;;
  import {AngularFire} from &quot;angularfire2&quot;;
  import {Observable} from &quot;rxjs&quot;;
  import &quot;rxjs/add/operator/map&quot;;
  
  @Injectable()
  export class BlogService {
    constructor(private af: AngularFire) { }
  
    getAllArticles(): Observable&lt;any[]&gt; {
      return this.af.database.list('articles', {
        query: {
          orderByKey: true,
          limitToLast: 10
        }
      }).map((articles) =&gt; {
        return articles.map((article) =&gt; {
          article.user = this.af.database.object(`/users/${article.user_id}`);
          return article;
        });
      });
    }
  }
  </code></pre>
  <p>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?</p>