Ionic 3, shared module for pipes, for lazy loaded pages

Question

With ionic 3 pages can be lazy loaded using IonicPage and IonicPageModule. The problem is that these lazy loaded pages do not have access to pipes.

    Failed to navigate:  Template parse errors:
The pipe 'myPipe' could not be found ("")

This question describes the issue and provide a solution. My only concern with the proposed solution is that it requires importing the shared module pipes.module in all lazy loaded pages.

Which kind of reverting back a nice feature introduced in angulr2 which is to import the pipe only one time in the app.module.ts.

I think there should be a better way by importing the shared module pipes.module in the app.module so all the pipes will be visible to all pages.

Here is the app.module.ts

    @NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    PipesModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

  ],
  providers: []
    })
    export class AppModule { }

Should not we use

PipesModule.forRoot(MyApp)

To make the PipesModule accessible to all lazy load pages?

Here is the pipes.moudle.ts file:

    @NgModule({
    declarations: [
        BreakLine,
        Hashtag,
        Translator
    ],
    imports: [

    ],
    exports: [
        BreakLine,
        Hashtag,
        Translator
    ]
    ,
})
export class PipesModule {}

Answer 1

I was just like you trying to find the proper way to handle this, after some research I will say that is the way we are supposed to handle this because of the following.

From angular faqs:

Create a SharedModule with the components, directives, and pipes that you use everywhere in your app. This module should consist entirely of declarations, most of them exported.

Import the SharedModule in your feature modules, both those loaded when the app starts and those you lazy load later

Also I found this ionic 3 doc, which provides some suggestions in how to handle components, pipes and services.

Answer 2

The new approach suggested to import pipes module in individual page module is better, because you don't have to load pipes when app / pwa starts, making app load faster using lazy loading.

Have a look at this article for more details.