Angular2: No Pipe decorator found on Component

Question

I am using a few pretty standard custom pipes in my Angular 2.0-rc1 app. All was well until I moved the pipes to a new folder. Now I am getting:

zone.js:461 Unhandled Promise rejection: No Pipe decorator found on RoomDetailWidgetComponent ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "No Pipe decorator found on RoomDetailWidgetComponent", stack: "Error: No Pipe decorator found on RoomDetailWidget…/@angular/compiler/src/runtime_compiler.js:66:49)"}message: "No Pipe decorator found on RoomDetailWidgetComponent"stack: "Error: No Pipe decorator found on RoomDetailWidgetComponent↵ at new BaseException ( http://localhost:5000/lib/@angular/compiler/src/facade/exceptions.js:17:23 )↵ at PipeResolver.resolve ( http://localhost:5000/lib/@angular/compiler/src/pipe_resolver.js:29:15 )↵ at CompileMetadataResolver.getPipeMetadata ( http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:142:47 )↵ at eval ( http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:173:57 )↵ at Array.map (native)↵ at CompileMetadataResolver.getViewPipesMetadata ( http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:173:22 )↵ at eval ( http://localhost:5000/lib/@angular/compiler/src/runtime_compiler.js:80:58 )↵ at Array.forEach ( native)↵ at RuntimeCompiler._compileComponent ( http://localhost:5000/lib/@angular/compiler/src/runtime_compiler.js:76:36 )↵ at eval ( http://localhost:5000/lib/@angular/compiler/src/runtime_compiler.js:66:49 )" proto : ErrorconsoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): No Pipe decorator found on RoomDetailWidgetComponent(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

 import { Component, AfterViewInit, Input, SimpleChange, Output, EventEmitter } from "@angular/core"; import { IPropertyRoom } from "./../../shared/propertyData"; import { FirstHalfPipe } from "./../../shared/pipes/first-half.pipe"; import { SecondHalfPipe } from "./../../shared/pipes/second-half.pipe"; export interface IRoomData { roomId: number; isFeatured: boolean; roomName: string; featurePicSrc: string; description: string; amenities: string[]; } @Component({ selector: "room-detail-widget", templateUrl: "app/mobile/roomDetailWidget/room-detail-widget.html", directives: [], pipes: [FirstHalfPipe,SecondHalfPipe] }) export class RoomDetailWidgetComponent { @Input() roomDetail: IRoomData; @Output() onRoomTabClick = new EventEmitter(); constructor() { } ngOnChanges(changes: { [propName: string]: SimpleChange }) { this.roomDetail = changes["roomDetail"].currentValue; } roomClick() { this.onRoomTabClick.emit(this.roomDetail.roomId); } }

As you can see, I am declaring the pipes in my component. The paths are all ok. Can't figure out how to fix this.

Answer 1

As it turned out it was a "dumb" error.

I accidentally referenced the offending component as a pipe, rather than a directive, in the parent component as follows:

 import { RoomDetailWidgetComponent, IRoomData } from "./../roomDetailWidget/room-detail-widget.component" @Component({ directives: [], selector: "parent", templateUrl: "path/parent.html", pipes: [RoomDetailWidgetComponent] //Duh, big FAIL }) export class ParentComponent { constructor() { } } 

Hopefully this will help avert headache for somebody else. Easy mistake to make...

Answer 2

Pipes don't support inheritance. It's just a guess but I remember seeing that a pipe that extends another class causes this error. https://github.com/angular/angular/issues/8694

Answer 3

It seems that Angular2 can find metadata for a pipe.

When you add the Pipe decorator, the following is added.

[PipeMetadata]
  0: PipeMetadata
    _pure: undefined
    name: "some"
    pure: (...)
    __proto__: InjectableMetadata
  length:1
  __proto__: Array[0]

See this plunkr: https://plnkr.co/edit/d0gXbGm3mus1cQLE1wgB?p=preview .

Perhaps your path to modules containing the pipes aren't correct so your imported pipes are null...

Answer 4

I have used TimeAgoPipe https://www.npmjs.com/package/time-ago-pipe in Angular10 Project. In my case, "TimeAgoPipe" is only used in the Angular2 project.

So for Angular10 we need to use "ngx-timeago"

Please refer this: https://www.npmjs.com/package/ngx-timeago

Short snippet:

Package-json: "ngx-timeago":"^2.0.0"

App.module.ts: inside imports array => importsTimeagoModule.forRoot()

Shared.module.ts: inside Exports array add => TimeagoModule

testpipe.html: "{{date | timeago}}"