# Ionic 4 custom Pipes

**URL:** <https://forum.ionicframework.com/t/ionic-4-custom-pipes/157074>\
**Category:** ionic-v3\
**Created:** [February 21, 2019, 11:16am UTC](https://forum.ionicframework.com/t/ionic-4-custom-pipes/157074 "2019-02-21T11:16:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![suresh9949](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@suresh9949](https://forum.ionicframework.com/u/suresh9949)\
**Post date:** [February 21, 2019, 11:16am UTC](https://forum.ionicframework.com/t/ionic-4-custom-pipes/157074/1 "2019-02-21T11:16:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![FdezRomero](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fdezromero/32/110635_2.png) [@FdezRomero](https://forum.ionicframework.com/u/FdezRomero)\
**Post date:** [February 21, 2019, 1:11pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-pipes/157074/2 "2019-02-21T13:11:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ChrisGriiffith](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chrisgriiffith/32/66576_2.png) [@ChrisGriiffith](https://forum.ionicframework.com/u/ChrisGriiffith)\
**Post date:** [February 21, 2019, 4:56pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-pipes/157074/3 "2019-02-21T16:56:37Z")

</div>

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

```auto
/* 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

```auto
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 {}

```

---

<div class="post-metadata">

**Author:** ![RonColombo](https://avatars.discourse-cdn.com/v4/letter/r/58956e/32.png) [@RonColombo](https://forum.ionicframework.com/u/RonColombo)\
**Post date:** [July 13, 2019, 4:53pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-pipes/157074/4 "2019-07-13T16:53:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ChrisGriiffith](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chrisgriiffith/32/66576_2.png) [@ChrisGriiffith](https://forum.ionicframework.com/u/ChrisGriiffith)\
**Post date:** [July 15, 2019, 4:00pm UTC](https://forum.ionicframework.com/t/ionic-4-custom-pipes/157074/5 "2019-07-15T16:00:01Z")

</div>

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