title: Angular 2 - Pipe cannot be found
body: <p>I'm trying to use my custom pipe with an array which I assign values to within a subscribe. However I get this error:</p>
  
  <pre><code>Unhandled Promise rejection: Template parse errors:
  The pipe 'summary' could not be found
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms'
  import { HttpModule } from '@angular/http'
  import { AppComponent }  from './app.component';
  import { UserComponent }  from './components/user.component';
  import { AboutComponent }  from './components/about.component';
  import { routing }  from './app.routing';
  import { SummaryPipe } from './pipes/summary.pipe'
  
  @NgModule({
    imports:      [ BrowserModule, FormsModule, HttpModule, routing ],
    declarations: [ AppComponent, UserComponent, AboutComponent, SummaryPipe ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>summary.pipe.ts</strong></p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core'
  
  @Pipe({name: 'summary'})
  export class SummaryPipe implements PipeTransform{
      transform(value: string, args: String[]){
          if(value)
              return value.substring(0, 50) + "...";
      }
  }
  </code></pre>
  
  <p><strong>user.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { PostsService } from '../services/posts.services';
  
  @Component({
      moduleId: module.id,
      selector: 'user',
      templateUrl: 'user.component.html',
      providers: [PostsService],
  
  })
  export class UserComponent  { 
    name: String;
    email: string;
    address: address;
    hobbies: string[];
    showHobbies: boolean;
    posts: Post[];
  
    constructor(private postsService: PostsService){
      this.name = 'John Doe';
      this.email = 'john@gmail.com';
      this.address = {
          street: '12 Main st',
          city: 'Boston',
          state: 'MA'
    }
    this.hobbies = ['Music', 'Movies', 'Sports']
    this.showHobbies = false;
  
    this.postsService.getPosts().subscribe(posts =&gt; {
        this.posts = posts;
    })
  
   }
  
    toggleHobbies(){
       if(this.showHobbies)
       this.showHobbies = false;
       else
       this.showHobbies = true;
   }
  
   addHobby(hobby){
       this.hobbies.push(hobby);
   }
  
   deleteHobby(index){
       this.hobbies.splice(index, 1);
   }
  }
  
   interface address{
       street: string;
       city: string;
       state: string;
   }
  
  interface Post{
      id: number;
      title: string;
      body: string;
  }
  </code></pre>
  
  <p><strong>user.component.html</strong></p>
  
  <pre><code>&lt;h3&gt;Posts&lt;/h3&gt;
      &lt;div  *ngFor="let post of posts"&gt;
          &lt;h3&gt;{{post.title }}&lt;/h3&gt;
          &lt;p&gt;{{post.body | summary}}&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I've followed the documentation but I can't seem to get it to work. Any ideas?</p>