angularangular8angular9web-frontendangular-pipe

Angular - No pipe found with name


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


Solution

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