CODEWITHSUNDEEP
angularpipe
Alessandro Celeghin
Alessandro Celeghin

Reputation: 4189

Custom pipe not be found angular 4

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

Upvotes: 2

Views: 2464

Answers (2)

ykadaru
ykadaru

Reputation: 1144

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

Upvotes: 0

Andrew Diamond
Andrew Diamond

Reputation: 6335

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

Upvotes: 3

Related Questions