Pipe could not be found in ionic4

#1

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],

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

Example: Create a TypePipe, as you have create your StatusairportPipe then create a MainPipeModule so you can export it in the providers key at app.module.ts.

Hope it helps!

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;

import { TypePipe } from ‘./type.pipe’;

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

export class MainPipeModule { }

1 Like
#3

unfortunately , it is same problem !

#4

Sorry, declare de created module in both keys: providers and imports.

Example Pipe:

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

import { GenericTypeFactory } from ‘…/common/generic-type’;

@Pipe({
name: ‘Type’
})
export class TypePipe implements PipeTransform {

transform(value: number, arg: string) {
return GenericTypeFactory.getInstance().getGenericTypes(arg)[value].Name;
}
}

#5

what about this ? delete or keep it ?

#6

keep it, basically this module is where you declare all the pipes to later on export to the rest of your project.

#7

l had error when l am try to run code

ERROR in src/app/app.module.ts(16,10): error TS2305: Module ‘“C:/Users/ali/krt/s
rc/app/main-pipe-module.pipe”’ has no exported member ‘MainPipeModulePipe’.

#8

l fixed it . 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