Sparked Sparked - 1 month ago 53
TypeScript Question

SignalR in Angular2 (Typescript) - Import Error

I am having problems using signalR in an Angular2-Typescript app. I have it working fine in a previous Angular 1 app. My problem is with the importing, to which I'm new and suspect I'm making a stupid mistake.

I have the intellisense working but the strong typing doesn't seem to map to the original js file correctly.

In node_modules, I have these two folders (edited here for space):

├───jquery
│ │ jquery.d.ts
│ │ LICENSE.txt
│ │ package.json
│ │ README.md
│ │
│ ├───dist
│ │ core.js
│ │ jquery.js

└───signalr
jquery.signalR.js
jquery.signalR.min.js
package.json
signalr.d.ts


The jquery.d.ts file is this one:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts

The signalr.d.ts file is this one:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/signalr/signalr.d.ts

Note: I have edited the signalr.d.ts to add this at the end, otherwise I can't import it:

declare var sr : JQueryStatic;

declare module 'signalr'{
export = sr;
}


In systemjs.config.js I use this to import signalr:

map: {
'signalr': 'npm:signalr/jquery.signalR.js'
}


And then in my component I use:

import * as $ from 'signalr'


I then have access to intellisense, for instance:

enter image description here

However, there are problems. If I use:

console.log($.hubConnection);


I get undefined.

Any help on this would be much appreciated.

Answer

You can try this way

map: {
      'ms-signalr-client': 'npm:ms-signalr-client/jquery.signalR.min.js',
      'jquery': 'npm:jquery/jquery.min.js'
}

in your ts

    import 'ms-signalr-client';
    import * as $ from 'jquery'; 
    ...
    $.hubConnection
    ...

Hope this helps