How can we import Pipe file in different Lazy Loading Pages in ionic3?

Question

This question is very similar to How can we use Provider in Pipe files while using Deep Linking and Lazy Loading Ionic 3? but in this question, we don't use Provider.

I have a 2 Lazy Loading Pages Page1 and Page2 and HomePage as a root page. In addition, MyPipe file is the Pipe file. as given below. I want to use this Pipe file in LAzy Loading Files Page1 and Page2 and HomePage

Case 1: If I add Pipe file only on app.module

page1.module.ts ( no imported Pipe file). We use pipe in page1.html
page2.moudel.ts ( no imported Pipe file). We use pipe in page2.html
app.module.ts ( import Pipe file). we use pipe in home.html

then below error occurs

Runtime Error Uncaught (in promise): Error: Template parse errors: The pipe 'myPipe' could not be found (" {{[ERROR ->]'test1' | myPipe}} "): ng:///Page1PageModule/Page1Page.html@16:2 Error: Template parse errors: The pipe 'myPipe' could not be found (" {{[ERROR ->]'test1' | myPipe}} "):

Case 2: If I import Pipe file to Page1Module and Page2Module

page1.module.ts ( imported Pipe file). We use pipe in page1.html
page2.moudel.ts ( imported Pipe file). We use pipe in page2.html
app.module.ts ( no import pipe.ts). we use pipe in home.html

then below error occurs

Runtime Error Uncaught (in promise): Error: Type MyPipe is part of the declarations of 2 modules: Page1PageModule and Page2PageModule! Please consider moving MyPipe to a higher module that imports Page1PageModule and Page2PageModule. You can also create a new NgModule that exports and includes MyPipe then import that NgModule in Page1PageModule and Page2PageModule. Error: Type MyPipe is part of the declarations of 2 modules: Page1PageModule and Page2PageModule! Please consider moving MyPipe to a higher module that imports Page1PageModule and Page2PageModule. You can also create a new NgModule that exports and includes MyPipe then import that NgModule in Page1PageModule and Page2PageModule.

Thanks for your recommendations.

Sampath Sampath · Accepted Answer · 2017-09-23T14:45:49

It is very simple. This is my workflow.

I create pipe using this CLI: ionic generate pipe MyFilter
Then it'll create pipes.module.ts automatically.
After that, I just import it into my lazy loaded page's module as below.

member.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MemberPage } from './member';
import { PipesModule } from '../../pipes/pipes.module';

@NgModule({
  declarations: [
    MemberPage,
  ],
  imports: [
    IonicPageModule.forChild(MemberPage),
    PipesModule <-- here
  ],
})
export class MemberPageModule { }

That is it. No errors and pipe is working perfectly too :)

How can we import Pipe file in different Lazy Loading Pages in ionic3?

1 Answers