Angular2:在组件上找不到管道装饰器
Angular2: No Pipe decorator found on Component
我在 Angular 2.0-rc1 应用程序中使用了一些非常标准的自定义管道。一切都很好,直到我将管道移动到一个新文件夹。现在我得到:
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);
}
}
如您所见,我正在组件中声明管道。路径都可以。无法弄清楚如何解决这个问题。
管道不支持继承。这只是一个猜测,但我记得看到一个延伸另一个 class 的管道导致了这个错误。 https://github.com/angular/angular/issues/8694
Angular2 似乎可以找到管道的元数据。
添加 Pipe
装饰器时,会添加以下内容。
[PipeMetadata]
0: PipeMetadata
_pure: undefined
name: "some"
pure: (...)
__proto__: InjectableMetadata
length:1
__proto__: Array[0]
看到这个 plunkr:https://plnkr.co/edit/d0gXbGm3mus1cQLE1wgB?p=preview。
可能您指向包含管道的模块的路径不正确,因此您导入的管道为空...
事实证明这是一个 "dumb" 错误。
我在父组件中不小心将有问题的组件引用为管道,而不是指令,如下所示:
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() {
}
}
希望这有助于避免其他人头疼。容易犯的错误...
我在 Angular10 项目中使用了 TimeAgoPipe https://www.npmjs.com/package/time-ago-pipe。就我而言,“TimeAgoPipe”仅用于 Angular2 项目。
所以对于 Angular10 我们需要使用
“ngx-timeago”
请参考:https://www.npmjs.com/package/ngx-timeago
简短片段:
包-json: "ngx-timeago":"^2.0.0"
App.module.ts: 内部导入数组 => importsTimeagoModule.forRoot()
Shared.module.ts:在 Exports 数组中添加 => TimeagoModule
testpipe.html:“{{日期 | timeago}}”
我在 Angular 2.0-rc1 应用程序中使用了一些非常标准的自定义管道。一切都很好,直到我将管道移动到一个新文件夹。现在我得到:
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);
}
}
如您所见,我正在组件中声明管道。路径都可以。无法弄清楚如何解决这个问题。
管道不支持继承。这只是一个猜测,但我记得看到一个延伸另一个 class 的管道导致了这个错误。 https://github.com/angular/angular/issues/8694
Angular2 似乎可以找到管道的元数据。
添加 Pipe
装饰器时,会添加以下内容。
[PipeMetadata]
0: PipeMetadata
_pure: undefined
name: "some"
pure: (...)
__proto__: InjectableMetadata
length:1
__proto__: Array[0]
看到这个 plunkr:https://plnkr.co/edit/d0gXbGm3mus1cQLE1wgB?p=preview。
可能您指向包含管道的模块的路径不正确,因此您导入的管道为空...
事实证明这是一个 "dumb" 错误。
我在父组件中不小心将有问题的组件引用为管道,而不是指令,如下所示:
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() {
}
}
希望这有助于避免其他人头疼。容易犯的错误...
我在 Angular10 项目中使用了 TimeAgoPipe https://www.npmjs.com/package/time-ago-pipe。就我而言,“TimeAgoPipe”仅用于 Angular2 项目。
所以对于 Angular10 我们需要使用 “ngx-timeago”
请参考:https://www.npmjs.com/package/ngx-timeago
简短片段:
包-json: "ngx-timeago":"^2.0.0"
App.module.ts: 内部导入数组 => importsTimeagoModule.forRoot()
Shared.module.ts:在 Exports 数组中添加 => TimeagoModule
testpipe.html:“{{日期 | timeago}}”