Ionic 4 custom Pipes

Ionic Framework ionic-v3
1

I have creating pipe on ionic 4 and angular 7. when I importing pipe in app.module.ts its giving Template parse errors, but when i importing in home.module.ts its working fine that page only its not working another page. Can you give any suggestions regarding this.

2

Hi @suresh9949,

As you have noticed, pipe modules (as well as component modules) have to be imported in every page that uses them (like home.module.ts), either directly or indirectly via a shared module (which would import and export the pipe).

Importing pipes in app.module.ts won’t work in pages/components. This is the intended behavior in Angular.

Best,
Rodrigo

2 Likes
3

An alternative to importing pipes on a page by page basis to create a PipesModule.

/* pipes.modules.ts */
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { TargetPipe } from './target.pipe';
import { RangePipe } from './range.pipe';
import { RoundTripPipe } from './round-trip.pipe';
import { PowerPipe } from './power.pipe';
import { FrequencyPipe } from './frequency.pipe';
import { DataRatePipe } from './data-rate.pipe';
import { SpacecraftPipe } from './spacecraft.pipe';

@NgModule({
  declarations: [TargetPipe, RangePipe, RoundTripPipe, PowerPipe, FrequencyPipe, DataRatePipe, SpacecraftPipe],
  imports: [IonicModule],
  exports: [TargetPipe, RangePipe, RoundTripPipe, PowerPipe, FrequencyPipe, DataRatePipe, SpacecraftPipe]
})
export class PipesModule {}

then import that into your app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PipesModule } from './pipes/pipes.modules';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, PipesModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
1 Like
4

So i’ve done this and it works on all my pages just fine but when i try and use a pipe in a service i still get the error about not finding the pipe. have any insight on why that might happen?

5

I think you need to declare it in the providers array for that service’s module.

1 Like