ionic3自定义管道，导入使用后报错找不到管道（The pipe 'wordPlacePipe' could not be found）的坑

最近在做一个app项目。使用了ionic3框架，中间要做一个输入框输入字符在一些已知的字符中筛选并高亮提示的搜索功能，我选择使用过滤的方法来实现，在angular4-ionic3中也叫管道。

在项目中创建管道命令行：ionic g pipe wordPlace

创建完成后，会生成如下文件目录：

我所需要的功能只需要在word-place.ts中写入代码就可以了，然后在app.module.ts中导入，注意在imports中添加：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

// pages
import { AboutPage } from '../pages/about/about';

/* pipes */
import { PipesModule } from '../pipes/pipes.module';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    PipesModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

然后在page中使用就可以了，然后使用的时候一直报错提示管道找不到，接下来就是要注意的一点坑了：

我们看看word-place.ts这个文件中：