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. https://stackoverflow.com/documentation/angular2/1165/pipes/3756/custom-pipes#t=201706301331556332039 — Christopher Moore, Jun 30 '17 at 13:32
it doesn't change, I've created module because I already have this error — Alessandro Celeghin, Jun 30 '17 at 13:43
It works if I import the formatdate.pipe in the declarations of every child module — Alessandro Celeghin, Jun 30 '17 at 13:59
You have to import it https://stackoverflow.com/questions/43153370/why-lazy-loaded-module-has-to-import-commonmodule-angular-2/43153529#43153529 — yurzui, Jun 30 '17 at 14:10

score 3 · Answer 1 · answered Jun 30 '17 at 13:35

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 '17 at 13:35

Andrew Diamond

6,295
1
15
33

1

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)[]'. Type 'typeof AppComponent | { ngModule: typeof PipeModule; providers: any[]; }' is not assignable to type 'any[] | Type'. Type '{ ngModule: typeof PipeModule; providers: any[]; }' is not assignable to type 'any[] | Type'. – Alessandro Celeghin Jun 30 '17 at 13:41
3

Why do you think so? – yurzui Jun 30 '17 at 14:08

score 0 · Answer 2 · answered May 17 '19 at 14:28

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,
...
]

Custom pipe not be found angular 4

2 Answers2