无法在Angular 2中完成自定义过滤管道

我正在Angular 2中构建一个Product List项目，并希望使用自定义管道来“过滤” . 我已经在包括这里在内的许多站点进行了研究，然后我发现管道现在在app.Module声明中声明，而不是在组件内部 . 但仍然无法显示我的应用程序，并想知道是什么导致我的项目无法工作 .

产品filter.pipe.ts

import { PipeTransform, Pipe } from '@angular/Core';
    import { IProduct } from './product';

    @Pipe({
    name: 'productFilter'

    })

    export class ProductFilterPipe implements PipeTransform {

    transform(value: IProduct[], args: string[]): IProduct[] {
        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
        return filter ? value.filter((product: IProduct)  =>
            product.productName.toLocaleLowerCase().indexOf(filter) != -1) :    value; 
    }
    }

我使用管道字符在模板中过滤了产品列表

产品list.component.html

<div class='col-md-2'>Filter by:</div>
                <div class='col-md-4'>
                    <input type='text' 
                     [(ngModel)]='listFilter' />
                </div>
            </div>
            <div class='row'>
                <div class='col-md-6'>
                    <h3>Filtered by: {{listFilter}} </h3>
                </div>
            </div>
            <div class='table responsive'>
                <table class='table' *ngIf='products && products.length'>
                    <thead>
                        <tr>
                            <th>
                                <button class='btn btn-primary'
                                    (click)='toggleImage()'>
                                    {{showImage ? 'Hide' : 'Show'}} Image 
                                </button>
                            </th>
                            <th>Product</th>
                            <th>Code</th>
                            <th>Available</th>
                            <th>Price</th>
                            <th>5 Star Rating</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor= 'let product of products |  productFilter:listFilter'> 
                            <td>

我的app.module文件带有管道声明 .

app.module.ts文件

import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { ProductListComponent } from './products/product-list.Component';

    import { ProductFilterPipe } from './products/product-filter.pipe';

    import { AppComponent }  from './app.component';

    @NgModule({
    imports: [ BrowserModule,FormsModule ],
    declarations: [ AppComponent,ProductListComponent,ProductFilterPipe],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }

如果有人可以帮我解决这个问题，我会感激不尽，因为我想找到错过的东西 .