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? — Eddie Martinez
– Eddie Martinez, Commented Apr 6, 2017 at 21:24

SrAxi · Accepted Answer · 2017-04-06 21:22:54Z

A this to your pipe code:

constructor() { }

Like this:

@Pipe({name: 'contextualize'}) export class ContextPipe implements PipeTransform { constructor() { } transform(value: string) { // Logic here... } } }

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related