Angular 2（2.0.0 到 2.2.0~）在使用“import 'reflect-metadata'”行添加自定义装饰器时出错

Posted 2023-02-23

【中文标题】Angular 2（2.0.0 到 2.2.0~）在使用“import \'reflect-metadata\'”行添加自定义装饰器时出错

【英文标题】：Angular 2 (2.0.0 to 2.2.0~) getting error while adding custom decorator with the line "import 'reflect-metadata'"Angular 2（2.0.0 到 2.2.0~）在使用“import 'reflect-metadata'”行添加自定义装饰器时出错

【发布时间】：2017-02-09 01:59:26

【问题描述】：

在我基于 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.

编辑

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

【问题讨论】：

这些错误听起来与装饰器无关。您是说不使用装饰器时一切正常吗？如果是这样，您是否在项目中安装了reflect-metadata？

是的，如果我删除装饰器，一切正常，通过消除 @Validate 应用程序加载正确...我已经下载了 tour-of.heroes 没有编辑任何内容，实际上我也尝试过看看新版本的角度是否正确运行，但使用 2.1.0-beta.0 版本我仍然有这个问题。是的，reflect-metadata: ^0.1.3 已经在英雄之旅项目的 package.json 中。

【参考方案1】：

经过一天的角度调试和代码编辑后，我找到了解决此问题的方法，方法是在在所有其他导入的基础上添加另一个导入：

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

编辑

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

【讨论】：

这拯救了我的一天

我遇到了同样的问题，重要的是我要注意的是，将导入添加到 app.module.ts 中的所有其他导入或您的模块文件命名的任何其他导入之上。

【参考方案2】：

根据 Lemmy4555 的回答（我没有代表发表评论），我可以通过添加来解决这个问题

import "reflect-metadata";

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

这不是一个理想的解决方案，但 IMO 它比在弹出错误的地方导入它更干净。

【参考方案3】：

我在控制台中遇到同样的错误

错误：无法解析 XXX 的所有参数：(?, ?, ?)

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

希望能帮到你。

【讨论】：

使用导入反射元数据时出现错误。无论如何，我已经通过添加此行 provide:"appLoginService", useClass: LoginService , 尝试了您的解决方案，并像这样编辑了注入点：@Inject('appLoginService') private loginService: LoginService。我仍然有错误

好的，我会在几个小时内尝试在 plunker 中创建一个示例，如果找到解决方案，请粘贴到此处。

我不明白您为什么要这样做，但在我的示例 here 中看起来像工作。我在装饰的设置器上放了一个调试器并停在那里。如果您解释更多您想做什么，可能会帮助您提供其他示例。

从我的实际项目中删除所有服务后，我会尝试做同样的事情，也许问题是其中一项服务。

看起来在某些情况下（就像我的一样） Reflect.ts 类的构造函数在启动时被调用了两次，这会导致丢失 Angular 读取组件装饰器所需的信息：@Component...

【参考方案4】：

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

【参考方案5】：

另一个对我有用的选项是使用 Reflect 作为全局变量，根本不导入反射元数据

类似的东西 declare const global: any; const Reflect = global['Reflect'];

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