Getting 'Could Not Be Found' Error re: Custom Pipe in Angular 2 App

Question

I have created a custom pipe to use in my Angular 2 app. My view code using the pipe looks like this:

<div class="search-item-name">{{result.name}} <span class="search-context">{{result.type | contextualize}}</span></div>

The pipe file itself looks like this:

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

@Pipe({name: 'contextualize'})
export class ContextPipe implements PipeTransform {

    transform(value: string) {
       // Logic here...
        }
    }
}

However, after trying to use it in my component view, I am getting this error:

Template parse errors: The pipe 'contextualize' could not be found

I'm unclear why this is the case. I have put the pipe in a shared module:

import { ContextPipe } from './context.pipe';
import { CapitalizePipe } from './capitalize.pipe';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AbbreviatePipe } from './abbreviate.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CapitalizePipe,
    AbbreviatePipe,
    ContextPipe
  ],
  exports: [
    CapitalizePipe,
    AbbreviatePipe,
    ContextPipe
  ],
})
export class SharedModule { }

And then, in both the root ngModule and in the component I'm trying to use this pipe in, I have imported that SharedModule. But still the error appears. Is there something I'm overlooking here?

are you importing shared to the module you are trying to use correctly? — Eduardo Dennis

SrAxi SrAxi · Accepted Answer · 2017-04-06T21:22:54

A this to your pipe code:

constructor() { }

Like this:

@Pipe({name: 'contextualize'})
export class ContextPipe implements PipeTransform {

    constructor() { }

    transform(value: string) {
       // Logic here...
        }
    }
}

Getting 'Could Not Be Found' Error re: Custom Pipe in Angular 2 App

1 Answers