Custom pipe not be found angular 4

Question

I have to implements my custom Pipe in angular 4, but in the component when I try to use this custom pipe I have the following error:

<div>{{ selected.lastModifiedDate | formatdate}}</div>

Template parse errors: The pipe 'formatdate' could not be found

my custom pipe at the moment is empty:

formatdate.pipe

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'formatdate' }) export class FormatdatePipe implements PipeTransform { transform(value: any, args?: any): any { return null; } }

I have a shared pipe module

pipe.module

import { NgModule } from '@angular/core'; import { FormatdatePipe } from '../pipes/formatdate.pipe'; @NgModule({ imports: [], declarations: [FormatdatePipe], exports: [FormatdatePipe], }) export class PipeModule { static forRoot() { return { ngModule: PipeModule, providers: [], }; } }

And in my principal app module

app.module

import { PipeModule } from './shared/pipes/pipe.module'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes), PipeModule.forRoot(), ....

Where is the problem? maybe something in the module

Is there any reason you've created a pipe module? This is unnecessary. You just need to include the pipe in your app.module declarations. stackoverflow.com/documentation/angular2/1165/pipes/3756/… — Christopher Moore
– Christopher Moore, Commented Jun 30, 2017 at 13:32
it doesn't change, I've created module because I already have this error — Alessandro Celeghin
– Alessandro Celeghin, Commented Jun 30, 2017 at 13:43
It works if I import the formatdate.pipe in the declarations of every child module — Alessandro Celeghin
– Alessandro Celeghin, Commented Jun 30, 2017 at 13:59
You have to import it stackoverflow.com/questions/43153370/… — yurzui
– yurzui, Commented Jun 30, 2017 at 14:10

Andrew Diamond · Accepted Answer · 2017-06-30 13:35:26Z

3

You need to import the module in your declarations of app.module, not the imports.

import { PipeModule } from './shared/pipes/pipe.module'; @NgModule({ declarations: [ AppComponent, PipeModule.forRoot() ], imports: [ BrowserModule, .......

answered Jun 30, 2017 at 13:35

Andrew Diamond

6,3451 gold badge18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alessandro Celeghin Over a year ago

Argument of type '{ declarations: (typeof AppComponent | { ngModule: typeof PipeModule; providers: any[]; })[]; imp...' is not assignable to parameter of type 'NgModule'. Types of property 'declarations' are incompatible. Type '(typeof AppComponent | { ngModule: typeof PipeModule; providers: any[]; })[]' is not assignable to type '(any[] | Type<any>)[]'. Type 'typeof AppComponent | { ngModule: typeof PipeModule; providers: any[]; }' is not assignable to type 'any[] | Type<any>'. Type '{ ngModule: typeof PipeModule; providers: any[]; }' is not assignable to type 'any[] | Type<any>'.

yurzui Over a year ago

Why do you think so?

ykadaru · Accepted Answer · 2019-05-17 14:28:47Z

Try adding your Pipe to the providers array of your pipe module, not just the declarations and exports.

Making a separate module for the Pipe is not required, but is definitely an alternative as you've done. Check the official docs footnote: https://angular.io/guide/pipes#custom-pipes

You use your custom pipe the same way you use built-in pipes.
You must include your pipe in the declarations array of the AppModule . If you choose to inject your pipe into a class, you must provide it in the providers array of your NgModule.

All you have to do is add your pipe to the declarations array, and the providers array in the module where you want to use the Pipe.

declarations: [ ... CustomPipe, ... ], providers: [ ... CustomPipe, ... ]

Collectives™ on Stack Overflow

Custom pipe not be found angular 4

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related