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

}