CODEWITHSUNDEEP
angularpipes-filters
brando
brando

Reputation: 8431

Angular2: No Pipe decorator found on Component

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.

Upvotes: 1

Views: 2653

Answers (4)

Muthulakshmi M
Muthulakshmi M

Reputation: 787

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}}"

Upvotes: 0

brando
brando

Reputation: 8431

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...

Upvotes: 4

Thierry Templier
Thierry Templier

Reputation: 202316

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...

Upvotes: 1

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658067

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

Upvotes: 1

Related Questions