Angular 2（2.0.0到2.2.0~）在添加自定义装饰器时出现错误，其中包含“import”reflect-metadata'“

Question

在我的项目基于gulp我试图实现一个自定义装饰器进行数据验证，但在某一点上我因为这个错误而卡住了：

Error: Can't resolve all parameters for LoginService: (?, ?, ?).(…)

或者在其他情况下出现这样的错误：

Unexpected value 'AppComponent' declared by the module 'AppModule'

然后我开始做一些测试，我发现导致这个错误的那一行是：

import "reflect-metadata";

以下是两个版本的英雄之旅教程：

With the error caused by importing reflect-metadata.

And with the solution.

编辑

我已经通过添加角度版本来编辑标题，我确信这个修复工作，从版本1.3.0我无法使用装饰器，这就是为什么我将我的项目从gulp移动到webpack

Answer 1

经过一天调试角度和编辑我的代码后，我发现只有在所有其他导入之上添加另一个导入才能解决此问题：

import "reflect-metadata";

到错误中提到的类，即使该类没有使用reflect-metadata的任何对象：

例如如果您收到如下错误：

Error: Can't resolve all parameters for LoginService: (?, ?, ?).(…)

要么

Unexpected value 'AppComponent' declared by the module 'AppModule'

将导入行添加到类LoginService和AppComponent以解决此问题。

Here is a working version on Plunker.

编辑

我已经通过添加角度版本来编辑标题，我确信这个修复工作，从版本1.3.0我无法使用装饰器，这就是为什么我将我的项目从gulp移动到webpack

Answer 2

建立Lemmy4555的答案（我没有代表评论），我能够通过添加来解决这个问题

import "reflect-metadata";

到我的主要角度模块。我还不能确切地解释出现了什么问题，但是通过将库导入其他地方，似乎在角度的装饰器中抛出了扳手，并且依赖注入无法正常工作。

这不是一个理想的解决方案，但IMO比导入错误的地方更清晰。

Answer 3

我在控制台中有同样的错误

错误：无法解析XXX的所有参数：（？，？，？）

我找到了一个解决方案，在NgModule上提供我的服务，看看我的答案here

我希望能帮助你。

Answer 4

我通过删除Unexpected value 'XXX' declared by the module 'AppModule'语句并通过import 'reflect-metadata';安装Reflect的输入法来修复类似的错误（npm install @types/reflect-metadata --save-dev）

Answer 5

另一个适合我的选择是使用Reflect作为全局变量，而根本不导入reflect-metadata

像

declare const global: any;
const Reflect = global['Reflect'];

之类的东西

参考https://blog.angularindepth.com/implementing-custom-component-decorator-in-angular-4d037d5a3f0d