[Solved] Pipe not found in custom component

Ionic Framework ionic-v3
13

I know this one is marked as solved, here is a similar problem i had, which ive spent the last few hours struggling to figure out. It might help other newbies like me.

I couldn’t understand why my pipe worked in one project, but when i moved the code to a new project it didnt work.

kept getting error about ‘name_of_my_pipe’ not being found

i had correctly ensured/created the following using the ‘generate’ command from the CLI
my_pipe.ts
pipes.module.ts
listpage.ts (listpage is my homepage)
listpage.module.ts (listpage is my hompage

and ensure the following was in the llistpage.module.ts
import { PipesModule } from ‘…/…/pipes/pipes.module’;

I finally realised my app.module.ts was declaring/exporting my ‘home-page’ twice once as ‘MyApp’ and the also as ‘ListPage’ (i am a complete novice, basically hacking together something from some example code, it looks like when i created the page ‘ListPage’ using the ionic CLI (which was already the home-page in the app) it auto added the normal page code and references to the app.module.ts)

anyways here is my original app.module.ts (only relevant imports shown)

import { MyApp } from './app.component';
import { ListPage } from '../pages/list/list';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

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

once i removed the references to ListPage (which remember is already my app home page as declared in app.component.ts

my custom pipe was now recognised

import { MyApp } from './app.component';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

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