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

For the peeps who are facing the same issue with angular 17 standalone components; You just have to import the pipe in your import section of the component class. And then use it in your template.

@Component({
 selector: 'app-heroes',
 standalone: true,
 imports: [UpperCasePipe],
 templateUrl: './heroes.component.html',
 styleUrl: './heroes.component.scss'
})
----------
<h2>{{hero.name | uppercase}} Details</h2>

Answer 2

2024 & angular 13

Part #1

• Identify the html template in which your pipe being using
• Identify in the component related to the html template
• Identify the module in which the component is being loaded. Not always is the app.module

Part #2

• Just to try create a folder called "shared" to store the pipe and shared module
• Create a Pipe

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

@Pipe({
  name: 'safeJson'
})
export class SafeJsonPipe implements PipeTransform {
  transform(objToParse: Record<string, any>): string {
    console.log('In Pipe ....');
    return JSON.stringify(objToParse, null, 4);
  }
}

• Create a module called Shared or whatever and load the pipe in declarations and exports

import { NgModule } from '@angular/core';
import { SafeJsonPipe } from './safe-json.pipe';
@NgModule({
  declarations: [SafeJsonPipe],
  exports: [SafeJsonPipe]
})
export class SharedModule {}

• Finally use your pipe in the html template

 <textarea>{{ response.acmeObject | safeJson }}</textarea>

Part #3

• In the identified module, load the share module in the imports section

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

@NgModule({
  declarations: [...],
  imports: [..., SharedModule ],
})
export class DashboardModule {}

Answer 3

I faced this problem and the solution was to add (CommonModule) inside the file (moduleName.module.ts) inside (imports array) and the problem was solved.

I hope I have been helpful to you.

Answer 4

Make sure that you put your pipe inside both providers and declarations of its module, as you will also get this error when your component is not in the declarations array:

@NgModule({
  imports: [
     ...  
  ],
  declarations: [
     MyComponent,
     FilterByPrcNamePipe           // <-- Add pipe here
  ],
  exports: [MyComponent],
  providers: [FilterByPrcNamePipe] // <-- And also here
})
export class MyModule {}

Answer 5

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 { }

Answer 6

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

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 9

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 10

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 11

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, ' ');
    }

}