Angular - No pipe found with name

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

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

}

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!

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

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'