使用jQuery的Angular-cli和Karma [英] Angular-cli and Karma with jQuery

问题描述

我在网上搜索过，无法找到解决当前问题的方法，即使这似乎是非常常见的问题 ......

I have searched the web and could not find a solution for my current problem, even though seems to be a very common issue...

运行 ng test 时，我发现Karma浏览器打开并且没有显示任何内容：

When running ng test I find that the Karma browser opens and shows nothing:

此外，这是我的控制台：

Also, this is my console:

为了使用jQuery，我做了解释的事情这里。

In order to use jQuery, I have done the things explained here.

这是我的 lib.ts （基本上与 vendor.ts 相同）：

// jQuery
declare let jQuery: any;

// RxJS
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';


// Dependencies
window['jQuery'] = require('jquery');
window['$'] = window['jQuery'];
import 'imports-loader?jQuery=jquery!jquery-color/jquery.color.js';
import 'jquery-ui-npm/jquery-ui.min.js';

require('bootstrap/js/tooltip.js'); // required for X-editable
require('bootstrap/js/popover.js'); // required for X-editable
require('bootstrap/js/dropdown.js'); // required for bootstrap-colorpicker
require('bootstrap/js/tab.js'); //
require('bootstrap/js/modal.js'); //

window['moment'] = require('moment');

import 'imports-loader?jQuery=jquery!jquery-color/jquery.color.js'

我将 lib.ts 导入 main.ts 。

最后，有问题的组成部分：

And finally, the problematic component:

aside-chat-boxes.ts：

'use strict';

declare let $: any;

$.widget("ui.chatbox", {
   // A bunch of stuff here
}

我没有把这个组件的所有代码都放在为谁阅读。

I didn't put all the code of this component for the sake of who's reading.

推荐答案

通过将此添加到我的组件的顶部来解决这个问题：

Solved this by adding this to the top part of my component:

import $ from 'jquery/dist/jquery';

这不是我想要的解决方案，但它是一种有用的解决方法。

It's not the solution that I was looking for, but is a useful workaround.

我仍然对在Angular项目中使用jQuery时遇到的所有问题感到惊讶...

I'm still amazed of all the problems that we have when using jQuery in an Angular project...

更新（04-01-2018）

最好的方法是将jQuery添加到 karma.conf 文件中的.js ：[] 数组。例如：

The best approach should be to add jQuery to karma.conf.js in the files: [] array. Such as:

files: [
  // imports of dependencies
  ...

  // importing jQuery
  'node_modules/jquery/dist/jquery.min.js'
]

这篇关于使用jQuery的Angular-cli和Karma的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！