Angular2：找不到管道'SomePipe'

Question

I have custom pipe which I m using to search a string in the table data and I get the error message " The pipe 'FilterPipe' could not be found " . I referred the below question but the solution given there didn't work me.

The pipe ' ' could not be found angular2 custom pipe

Actual.pipe.ts

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

@Pipe({
    name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
    transform(value: any, input: string) {
        if (input) {
            input = input.toLowerCase();
            return value.filter(function (el: any) {
                return el.Name.toLowerCase().indexOf(input) > -1;
            })
        }
        return value;
    }
}

main-ipe.module.ts

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";

import {FilterPipe} from "./Actual.pipe";

@NgModule({
declarations:[FilterPipe],
imports:[CommonModule],
exports:[FilterPipe]
})

export class MainPipe{}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { Ng2DragDropModule } from 'ng2-drag-drop';
import {DndModule} from 'ng2-dnd';

import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { AppConfig } from './app.config';
import {MainPipe} from './main-pipe.module';

import { AlertComponent } from './_directives/index';
import { AuthGuard } from './_guards/index';
import { AlertService, AuthenticationService, UserService, SchemaService, TemplateService } from './_services/index';
import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { UploadComponent } from './upload/index';
import { ReadComponent } from './read/index';
import { DragComponent } from './drag/index';

@NgModule({
    imports: [
        BrowserModule,
        DndModule.forRoot(),
        FormsModule,
        HttpModule,
        routing,
        Ng2DragDropModule,
        MainPipe
    ],
    declarations: [
        AppComponent,
        AlertComponent,
        HomeComponent,
        LoginComponent,
        RegisterComponent,
        FileSelectDirective,
        UploadComponent,
        ReadComponent,
        DragComponent
    ],
    providers: [
        AppConfig,
        AuthGuard,
        AlertService,
        AuthenticationService,
        UserService,
        SchemaService,
        TemplateService

    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

my html code where am using the pipe:

 <div class="table-responsive">
            <table class="table">
                 <thead>
                 <tr>
                      <th>Template Name</th>
                      <th>Created On</th>
                      <th>Last Modified</th>
                      <th>Actions</th>
                      </tr>
               </thead>
   <tbody *ngFor="let template of templates | FilterPipe: queryString">
           <tr>
               <td>{{template.Name}}</td>
               <td>{{template.Created_Date}}</td>
               <td>{{template.Modified_Date}}</td>
               <td>
               <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Edit</button>
               <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span>&nbsp;Delete</button>
               </td>
            </tr>
     </tbody>
   </table>

I tried referring to other similar questions as well, but even those didn't yeld any result. Am new to Angular2 , please help with this. Thanks for reading !

Answer 1

You should import your pipe into declarations not under imports ,

try this,

declarations: [
        AppComponent,
        AlertComponent,
        MainPipe,
        HomeComponent,
        LoginComponent,
        RegisterComponent,
        FileSelectDirective,
        UploadComponent,
        ReadComponent,
        DragComponent
    ],