运行"ng test"命令时找不到JQuery

问题描述

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

I have created a project using new angular-cli version and I made the project up and running. When I run ng serve and ng build command it works perfectly without giving any errors. But when I tried to run ng test it shows me errors like this.

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

I have added JQuery in the following way to the angular-cli.json

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

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

Then I have imported JQuery to my main module via this way

import 'jquery';

上述配置中是否缺少任何步骤?

Are there any missing steps in the above configurations?

推荐答案

假定已安装@types/jquery，请尝试将jquery添加到tsconfig.spec.json中的类型列表中(它应该已经具有jasmine和在列表中.

Assuming you have @types/jquery installed, try adding jquery to the list of types in tsconfig.spec.json (it should already have jasmine and node in the list).

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

Also, when you add jquery.min.js to the scripts list in angular-cli.json, it ends up in your scripts.bundle.js. When you then do import 'jquery'; in your main module it also ends up in your vendor.bundle.js, so you have added the code twice.

不用执行import 'jquery';，只需将jquery添加到tsconfig.app.json中的compilerOptions类型列表中(或创建一个"types": ["jquery"]).这样，您就可以引用全局jquery对象，而无需再次导入它.

Instead of doing import 'jquery';, just add jquery to your compilerOptions types list in tsconfig.app.json (or create one "types": ["jquery"]). You will then be able to reference the global jquery object without importing it a second time.

这篇关于运行"ng test"命令时找不到JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！