Angular - No pipe found with name

Question

I've created a pipe using "ng g pipe" command. I'm getting a console error when I'm using it in my code. The screenshots of the code are attached below. Error: error NG8004: No pipe found with name 'filterByPrcName'. filter-by-prc-name.pipe.tsConsole Error Message product-list.component.html

Answer 1

You will also get this error if your component is not in the declarations array of its parent module.

Answer 2

You need to open the angular module that declares your component, then add it to the declarations, and add the needed import.

Example:

 <td>{{product.productCode | lowercase | convertToSpaces: '-' }}</td>

ERROR in src/app/products/product-list.component.html:48:61 - error NG8004: No pipe found with name 'convertToSpaces'.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ProductListComponent } from './products/product-list.component';
import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe'; // <-- Add this

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ConvertToSpacesPipe  // <-- Add this
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  bootstrap: [AppComponent],

  //exports: [AppComponent],

})
export class AppModule { }

convert-to-spaces.pipe.ts

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

@Pipe({ name: 'convertToSpaces' })

export class ConvertToSpacesPipe implements PipeTransform {

    transform(value: string, character: string): string {
        return value.replace(character, ' ');
    }

}

Answer 3

I was facing this error when I was using currency pipe in lazy loaded module, for this you have to import CommonModule both in current module and in app.module.ts

For modules which are not lazy loaded no need to import CommonModule

Answer 4

I spent ages trying to solve this problem when modifying code others had implemented, labouring over what I was missing in app.module.ts of if the latest version of Angular had changed things, when finally I discovered that there was another 'module' in the codebase in addition to app.module.ts.

When I finally figured this out and made the code modifications as per @live-love's answer, including pipe declarations in the other module instead of app.module.ts, it finally worked - phew!

Answer 5

In addition to the answers above, if you have the pipe in a SharedModule, make sure you add the pipe in its exports array also

Answer 6

This can happen if you are using the class name of the pipe in the HTML template, instead of using the actual name that was used when the pipe was declared

In my template I was using 'TrustHTMLPipe' instead of 'trustHTML'

Answer 7

If you have built an Angular library (as a multi-project), be sure to add my-thing.module.ts to public-api.ts

Snippet of my public-api.ts

export * from "./my-thing/my-thing.module";  // Don't forget this line!
export * from "./my-thing/my-thing.service";
export * from "./my-thing/list-my-thing/list-my-thing.resolver.service";
export * from "./my-thing/list-my-thing/list-my-thing.component";
...

Answer 8

If you imported your pipe into a sharedmodule 's declarations, at first added this module into your current component's module.

Sample:

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

  imports: [
  ...
  SharedModule ,
  ...
]
})
export class SettingsModule { }