angular2 error with pipe filter in component

Question

I'm trying to add simple search filter in input, so it could filter my records in table.

But I'm receiving this kind of error:

app/components/orders/orders.component.ts(12,2): error TS2345:
 Argument of type '{ moduleId: string; selector: string; templateUrl:
 string; pipes: typeof FilterPipe[]; }' is not assignable to parameter
 of type 'Component'.   Object literal may only specify known
 properties, and 'pipes' does not exist in type 'Component'.

All files:

orders.component.html, orders.component.ts, filter.pipe.ts are in the same folder

And there is code in files:

HTML in orders.component.html

<input class="prompt" type="text" placeholder="Szukaj zlecenia..." [(ngModel)]="term">

<tr *ngFor="let order of orders">
    <td>{{order.orderNum}}</td>
    <td>{{order.clientNum}}</td>
    <td>{{order.dateCreated}}</td>
    <td>{{order.account}}</td>
    <td>{{order.status}}</td>
</tr>

---

filter.pipe.ts

 import { Injectable, Pipe, PipeTransform } from '@angular/core';

    @Pipe({
        name: 'ordersFilter',
        pure: false
    })
    @Injectable()
    export class FilterPipe implements PipeTransform {
        transform(items: any[], args: any[]): any {
            return items.filter(item => item.title.indexOf(args[0].title) !== -1);
        }
  }

---

orders.component.ts

import { Component } from '@angular/core';
    import { OrderService } from '../../services/order.service'
    import { Order } from '../../structure/Order';
    import { Injectable, Pipe, PipeTransform } from '@angular/core';
    import { FilterPipe } from './filter.pipe';

    @Component({
        moduleId: module.id,
        selector: 'orders',
        templateUrl: 'orders.component.html',
        pipes: [FilterPipe]
    })

It looks like it doesn't like pipes: [FilterPipe] but, as far as I know it is set properly.

In web browser I'm receiving this error:

zone.js:388 Unhandled Promise rejection: Template parse errors: The
 pipe 'ordersFilter' could not be found ("      </thead>        <tbody>         <tr
 [ERROR ->]*ngFor="let order of orders | ordersFilter:term">
            <td>{{order.orderNum}}</td>             <td>{{order.clien"):
 OrdersComponent@28:6 ; Zone: <root> ; Task: Promise.then ; Value:
 Error: Template parse errors:(…) Error: Template parse errors: The
 pipe 'ordersFilter' could not be found ("      </thead>        <tbody>         <tr
 [ERROR ->]*ngFor="let order of orders | ordersFilter:term">
            <td>{{order.orderNum}}</td>             <td>{{order.clien"):
 OrdersComponent@28:6

Answer 1

Most probably, you are using ngModule approach for your app if so than you are importing your pipe in incorrect way, you have to import your pipe in the module instead of your component i.e. orders component in your use case.

Try importing your pipe in higher module like this:

@NgModule({
  declarations: [FilterPipe,.... ],
  imports: [.... ],
  providers: [....],
  bootstrap: [AppComponent]
})
export class AppModule { }

P.S:- Moreover, you can also create your pipe as module to import this in more than one modules.

Answer 2

Hint: There is no need to add @Injectable() when there is already @Pipe(), @Component(), or @Directive()

Ensure you have FilterPipe added to declarations: [FilterPipe] of your current module

or

added the module that has

declarations: [FilterPipe],
exports: [FilterPipe]

to imports: [...] of your current module.

Answer 3

if you are using angular 4, then you do not need to specify pipes in you @Component.