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这个文件中：

要注意class声明的类名和name后面的不一样

注意！！！注意！！！注意！！！在page页面的html文件中使用的时候一定要使用的是word-place.ts中命名的name后面那个，而不是class声明的类名。

报错：

正确：

在这里报错找了半天原来是这个原因！！！希望各位不要遇到这样的坑！！