运行“ng test”命令时找不到 JQuery

Posted 2023-03-13

【中文标题】运行“ng test”命令时找不到 JQuery

【英文标题】：Can't Find JQuery When Running 'ng test' Command

【发布时间】：2018-03-23 22:22:46

【问题描述】：

我已经使用新的 angular-cli 版本创建了一个项目，并且我启动并运行了该项目。当我运行 ng serve 和 ng build 命令时，它可以完美运行而不会出现任何错误。但是当我尝试运行 ng test 时，它会显示这样的错误。

theme.provider.ts (53,31): Property 'removeClass' does not exist on type 'JQuery'.
theme.provider.ts (64,35): Property 'addClass' does not exist on type 'JQuery'.
theme.provider.spec.ts (7,30): Cannot find name '$'.

我已通过以下方式将 JQuery 添加到 angular-cli.json

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js"
 ],

然后我通过这种方式将 JQuery 导入到我的主模块中

import 'jquery';

以上配置是否有遗漏步骤？

【问题讨论】：

你能把错误放在文本中而不是图像中吗？

帖子已更新

【参考方案1】：

假设您已安装@types/jquery，请尝试将jquery 添加到tsconfig.spec.json 的类型列表中（列表中应该已经有jasmine 和node）。

---

此外，当您将jquery.min.js 添加到angular-cli.json 的scripts 列表中时，它最终会出现在您的scripts.bundle.js 中。然后，当您在主模块中执行 import 'jquery'; 时，它也最终会出现在您的 vendor.bundle.js 中，因此您已经添加了两次代码。

不用import 'jquery';，只需将jquery 添加到tsconfig.app.json 中的compilerOptions 类型列表（或创建一个"types": ["jquery"]）。然后，您将能够引用全局 jquery 对象，而无需再次导入它。