Pipe declared into 2 different modules

Ionic Framework ionic-v3
1

Hi all,
I created my custom Pipe but when I build for android platform (ionic cordova build android --prod --release --verbose), an error accurs. It works successfully when I try my app /ionic3) into browser using ionic serve command.

Type CountdownPipe in ../src/pipes/countdown/countdown.ts is part of
            the declarations of 2 modules: GruppiAcquistoPageModule in
            ../src/pages/gruppi-acquisto/gruppi-acquisto.module.ts and PipesModule
            in ../src/pipes/pipes.module.ts! Please consider moving CountdownPipe
            in ../src/pipes/countdown/countdown.ts to a higher module that imports
            GruppiAcquistoPageModule in
            ../src/pages/gruppi-acquisto/gruppi-acquisto.module.ts and PipesModule
            in ../src/pipes/pipes.module.ts. You can also create a new NgModule
            that exports and includes CountdownPipe in
            ../src/pipes/countdown/countdown.ts then import that NgModule in
            GruppiAcquistoPageModule in
            ../src/pages/gruppi-acquisto/gruppi-acquisto.module.ts and PipesModule
            in ../src/pipes/pipes.module.ts.

My files:

src/pipes/pipes.module.ts
src/pipes/countdown/countdown.ts
src/app/app.modules.ts
src\pages\gruppi-acquisto\gruppi-acquisto.html
src\pages\gruppi-acquisto\gruppi-acquisto.module.ts
src\pages\gruppi-acquisto\gruppi-acquisto.scss
src\pages\gruppi-acquisto\gruppi-acquisto.ts

gruppi-acquisto.ts

declarations: [
    GruppiAcquistoPage,
    CountdownPipe
  ],

pipes.module.ts

import { NgModule } from '@angular/core';
import { CountdownPipe } from './countdown/countdown';
@NgModule({
	declarations: [CountdownPipe],
	imports: [],
	exports: [CountdownPipe]
})
export class PipesModule {}

countdown.ts

@Pipe({
  name: 'countdown',
})
export class CountdownPipe implements PipeTransform {
  transform(dateStr: string, ...args) {
    ....
  }
}

I tried to read similar question on the forum but I can’t solve my issue. I tried to delete pipes.module.ts file and declare CountdownPipe into app.module.ts file but the solve is not solved

Could you please help me to solve?

Thanks

2 
  declarations: [ 
    GruppiAcquistoPage, 
-   CountdownPipe
  ],
  imports: [
+   PipesModule
  ]
2 Likes
3

I changed gruppi-acquisto.ts. It works. Thanky you very much for your help

4

Hi, how do you do it when you have multiple custom pipes? Do you declare them all in your pipes.module or do you create a module for each?

5

If you’re asking me personally, I put everything in a single app module. I have yet to encounter a situation where lazy loading was useful to me.

6

Thanks for answering!

Yeah, I’m asking how you manage it, cause I’m not sure I’m doing it the best way.
Right now, I have 3 custom pipes declared and exported in 1 pipe.module.
And I’m importing this pipe.module into every component that needs one of the pipes.

(I tried importing the pipe.module and the pipes in the app.module but I still couldn’t use the pipes in the deeper components, so that was no use)

What would you suggest?

(I’m building a mobile app BTW)

7

Unless you have a compelling reason to use lazy loading, I would suggest forgetting completely that it exists. Declare everything in the app module, and get back to writing app code instead of fooling around with structural tedium.

8

I’m sorry, but could you send me a sample of how you declare it in your app.module.
I have tried a dozen ways and my pipes are still not recognized on my other components.

My structure is something like this:
app.component
public > 5 tabs
private > 5 tabs

And when I declare them in app.module (declarations: [ …, SummaryPipe ] ), I still can’t use them in my tabs. I truly don’t get what I’m doing wrong.

Thanks so much for your time

9

That should be good.

All the components must also be declared in the same AppModule. No other modules whatsoever in your app code (naturally, modules imported from other third-party libraries are fine).