Angular2：在组件上找不到管道装饰器

Question

我在我的 Angular 2.0-rc1 应用程序中使用了一些非常标准的自定义管道。 一切都很好，直到我将管道移动到一个新文件夹。 现在我得到：

zone.js:461 未处理的承诺拒绝：在 RoomDetailWidgetComponent 上找不到管道装饰器； 区域：角度； 任务： Promise.then ； 值：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在 RoomDetailWidgetComponent 上找到装饰器“堆栈：”错误：在新的 BaseException ( http://localhost:5000/lib/@angular/compiler/src/facade/exceptions.js:17:23 )↵ 处未在 RoomDetailWidgetComponent↵ 上找到管道装饰器PipeResolver.resolve ( http://localhost:5000/lib/@angular/compiler/src/pipe_resolver.js:29:15 )↵ 在 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 )↵ 在 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/编译器/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 错误：未捕获（承诺）：在 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); } }

如您所见，我在组件中声明了管道。 路径一切正常。 无法弄清楚如何解决这个问题。

Answer 1

事实证明，这是一个“愚蠢”的错误。

我在父组件中意外地将有问题的组件引用为管道而不是指令，如下所示：

 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() { } } 

希望这将有助于避免其他人头痛。 容易犯的错误...

Answer 2

管道不支持继承。 只是一个猜测，但我记得看到扩展另一个类的管道会导致此错误。 https://github.com/angular/angular/issues/8694

Answer 3

看来Angular2可以找到管道的元数据。

添加Pipe装饰器时，将添加以下内容。

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

请参阅以下代码： https ://plnkr.co/edit/d0gXbGm3mus1cQLE1wgB ? p = preview。

可能您通往包含管道的模块的路径不正确，因此导入的管道为空...

Answer 4

我在 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: "{{date | timeago}}"