Angular pipe could not be found using ionic 4

Question

recently l create my own pipe in ionic4 name is StatusairportPipe . Then l imported it in app module.ts , now when l am trying to use it l got errors:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'my' could not be found ("
            <td text-center>{{item?.flight.aircraft.model.code}}</td>
            <td text-right>{{[ERROR ->]item?.flight.status.generic.status.text | my}}</td>

            </tr>

StatusairportPipe model ts

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

@Pipe({
  name: 'my'
})
export class StatusairportPipe implements PipeTransform {

  public states: Object = {
    'scheduled':   'مجدولة',

  };
  transform(value: string, ...args) {
    // This is our catch for data that hasn't interpolated
    // from its source yet, a basic async fix.
    if(value == null) return;
// Otherwise, lookup the state name from the acronym
    if(this.states[value]){
      return this.states[value];
    } else {
      return value;
    }
  }

}

app.module.ts

   import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouteReuseStrategy } from '@angular/router';

    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    import { SplashScreen } from '@ionic-native/splash-screen/ngx';
    import { StatusBar } from '@ionic-native/status-bar/ngx';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { HTTP } from '@ionic-native/http/ngx';
    import { Network } from '@ionic-native/network/ngx';
    import { StatusairportPipe } from './statusairport.pipe';

    @NgModule({
      declarations:
       [AppComponent, 
        StatusairportPipe

      ],
      entryComponents: [],

      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
        exports:[
    StatusairportPipe,
    AliPipe
  ],
      providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        HTTP,
        Network
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

Answer 1

When I created my own pipe in ionic 4 you need only add it the pipe your created already in module of page you want use. You don`t need to add in app.module

Answer 2

1. Firstly, create pipes folder in src/app folder (in app folder).

2. Second, on cmd "ionic generate pipe pipes/searchfilter" => this will generate two files in pipes.

3. Third, create file in pipes folder with name "pipes.module.ts" and write below code to => "pipes.module.ts"

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SearchfilterPipe } from './searchfilter.pipe';  //our pipe which we generate

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [SearchfilterPipe],
  exports: [SearchfilterPipe]
})
export class PipesModule { }

Now we have PipesModule we can generate more pipes and write them in pipesmodule. We will import only PipesModule instead of all pipes.

4. You do not have to import PipesModule in app.module.ts

5. Now go to page which you want to use pipe and open for example "anasayfa.module.ts" and import "PipesModule" and write it in @ngModel imports(it will be created automatically) Please be careful you will import PipesModule to something.MODULE.TS not something.page.ts

Answer 3

I've had this problem and I just added the pipe on the module export to solve the problem:

@NgModule({
  declarations:
   [AppComponent, 
    StatusairportPipe

  ],
  entryComponents: [],

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HTTP,
    Network
  ],
  bootstrap: [AppComponent],
  exports: [ StatusairportPipe]
})
  export class AppModule {}