How to load signalr.js in webpack inside Angular 2

Question

I always get the message:

$. hubConnection is not a function

Error: jQuery not found. Please make sure jQuery is referencing the SignalR client JavaScript file before. leak "$" and "jquery" undefined.

What do I need to do to get signalr to work with webpack?

Answer 1

Pure solution: use load-loader !!

npm install expose-loader --save-dev

inside your vendor.ts

import 'expose-loader?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';

inside your webpack.config.ts

new ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' })

: Jquery.signalR.js script umd. , webpack. jquery, , JQuery window.jQuery. webpack, jquery load-loader. , jquery jQuery global var. , signalr.js script .

, signalr $, enableplugin jquery. webpack.config.js

Answer 2

Microsoft SignalR Webpack TypeScript ES6.

:

///<reference path="./vendor/typings/signalr/signalr.d.ts"/>

interface SignalR {
    myHub: Some.Stuff.IMyHubProxy;
}

namespace MyWebsite.Stuff {
    export class SignalRConnectionService {
        ...
        public start() {
            var myHubProxy = $.connection.myHub;

            myHubProxy.client.onSomethingChanged = (eventArgs) => {
                // do stuff
            };

            $.connection.hub.start();
        }
    }
}

:

import "signalR";

export class SignalRConnectionService {
    public start() {
        ...
        const hubConnection = $.hubConnection();
        const myHubProxy = hubConnection.createHubProxy('myHub');

        myHubProxy.on('onSomethingChanged', (summary) => {
            // do stuff
        });

        hubConnection.start();
    }
}

---

webpack.config.js:

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        'window.jQuery': 'jquery',
        jQuery: "jquery"
    })
]

packages.json:

"dependencies": {
  "jquery": "~2.1.4",
  "signalr": "~2.2.3"
}

NB. <script src="/signalR/hubs"/>, .