jquery - 运行 'ng test'命令时找不到JQuery

Question

我已经使用新的 angular-cli 版本创建了一个项目，并且使该项目启动并运行。当我运行 ngserve 和 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';

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

Answer 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 对象，而无需再次导入它。