Angular 4 template "Pipe could not be found"

Question

I'm trying to use a custom-built pipe in my Angular 4 project. Can't figure out why the compiler doesn't recognize my pipe in the component template.

QFormat pipe

@Pipe({  name: 'qFormat'})
export class QFormatPipe implements PipeTransform {...}

SharedModule

@NgModule({
    declarations: [QFormatPipe],
    exports: [QFormatPipe]
})
export class SharedModule { }

FeatureModule

@NgModule({
  imports: [SharedModule],
  declarations: [MyComponent]
})
export class FeatureModule{ }

MyComponent.html

<div>{{someProp | qformat}}</div>
                  ^^^^^^^

The template throws error:

Angular: the pipe 'qformat' could not be found

Am I missing something?

Answer 1

In my case the problem was that generating through CLI was adding pipe inside app.module.ts but the module of the component I was working in was different. Or in your case it could be not registered pipe/wrongly registered pipe in module you're using it.

So a quick solution is:

Delete the pipe you've created (Don't forget to remove it from app.module.ts). Then create a folder like pipes: Then generate a module for it like 'ng g module pipes/pipes-common'

Then generate you pipe like 'ng g pipe myPipeExample` and now don't forget to add it

declarations:[myPipeExamplePipe] array and

exports:[myPipeExamplePipe] array

Now import this module inside the module where you want to have it working.

This question has multiple very helpful answers

Answer 2

The reason it can't find the pipe is because you registered the pipe as 'qFormat' with a capital F but in the HTML you have 'qformat' with a lowercase f. This is why the error is occurring. Your shared module registration and import/export is completely on point. The HTML should be:

<div>{{someProp | qFormat}}</div>

Hopefully that helps!