Angular 9 - Cant find custom pipe even with shared module

Question

I want to use a custom pipe in all of my components, according to the internet i should use a Shared module in which i import/export the pipe. When i import the shared module in the components in which i want to use the pipe it is supposed to work, but not for me.

The Pipe: import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'empty' }) export class EmptyPipe implements PipeTransform { public transform(value: any, ...args: any[]): string { if (!value || value.length < 1) { if (args.length < 1) { return "-" } else { return args[0]; } } return value; } }

The Shared Module:

import { CommonModule } from '@angular/common'; import { NgModule} from '@angular/core'; import { EmptyPipe } from './pipes/empty.pipe'; @NgModule({ imports: [CommonModule], declarations: [EmptyPipe], exports: [EmptyPipe, CommonModule] }) export class SharedModule { }

How I import it in the component i want to use it in:

import { SharedModule } from '../shared/shared.module';

How I try to use it:

{{companyList.earliest | empty}}

The error:

The pipe 'empty' could not be found

please share your'e module as well, you probably forgot to import or export the pipe — Or Yaacov
– Or Yaacov, Commented Aug 29, 2020 at 14:54

Berk Kurkcuoglu · Accepted Answer · 2020-08-29 14:54:56Z

You do not need to import a pipe to your component, if you have multiple modules, add shared module to the imports of modules where you want to use your pipe. Then simply use it in your templates without any extra effort.

ShivShankar Namdev · Accepted Answer · 2020-08-29 15:10:35Z

If you are using lazy loding routes and in lazy loded routes you are going to use that routes than declare that route in that lay loded module file. I faced this problem too so declaare in that respected module and problem will be solved

ProgIn · Accepted Answer · 2021-09-04 06:29:19Z

I have provided custom pipe in root, which is usable throughout the application, by decorating it with as given below.

@Injectable({ providedIn: 'root' })

Don't forget to export custom pipe in share module.

Collectives™ on Stack Overflow

Angular 9 - Cant find custom pipe even with shared module

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related