如何在 Angular2 组件中导入 SignalR？

Question

I am using angular-cli to scaffold my Angular2 application.

Below is the excerpt from my package.json :

"dependencies": {
    // ...
    "jquery": "^3.1.1",
    "signalr": "^2.2.1"
    //...
},
"devDependencies": {
    // ...
    "@types/jquery": "^2.0.39",
    "@types/signalr": "^2.2.33"
    //...
}

My app.component.ts :

import { Component } from '@angular/core';
import * as $ from "jquery";
import "signalr";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
    constructor() {
        console.log($);
    }
}

Now I get the below error from SignalR saying jQuery is not added, but I have imported it in the line above:

Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

If I comment out import "signalr"; jQuery gets loaded correctly. What is happening here? Why does SignalR say jQuery is not found?

Answer 1

I solved the issue this way:

import $ from 'jquery';
window.jQuery = $;
require('signalr');

Signalr has dependency on window.jQuery . For some reason import $ from 'jquery' doesn't set window.jQuery . That's why need to do it explicitly.