Angular-cli and Karma with jQuery

Question

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

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

Also, this is my console:

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

This is my lib.ts (basically the same as 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'

I import lib.ts to 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.

Answer 1

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.

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

Update (04-01-2018)

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'
]