[Fixed] Error in importing a Angular custom pipe from a shared folder

Issue

I created a custom pipe from a shared folder to use it in component 1 (example: Applicant component) HTML, so I imported it to ApplicantModule. My goal, is for this pipe to be reusable in component 2 (example: Applicant component) so I also import this custom pipe to component’s 2 module which is CoApplicantModule. After compiling I got console error.

When I tried to move the import statement of the custom pipe to SharedModule and tried the pipe from component 2, I got a console error.

I would like to ask for your help since couldn’t find the error for this one because I assume that it will work since SharedModule was also imported ApplicantModule and CoApplicantModule

Solution

You can’t declare your pipe in more than one module . You can create a module for all your custom pipes, then just import it in all the components you need to use them.

---

I usually create a directory in order to keep things organized. In this case pipes directory.

pipes/pipes.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyCustomPipe } from './myCustom.pipe';

@NgModule({
  declarations: [MyCustomPipe],
  imports: [
    CommonModule
  ],
  entryComponents: [MyCustomPipe],
  exports: [MyCustomPipe]
})
export class PipesModule { }

---

Now, you can reuse this in any of your components. For example:

pages/home/home.module.ts

...
import { PipesModule } from "../../pipes/pipes.module";
...

@NgModule({
  imports: [
    ...,
    PipesModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Now, they are already available here.

pages/home/home.page.html

...
<p>{{ something | myCustomPipe }}</p>
...