CODEWITHSUNDEEP
angulartypescript
Sparked
Sparked

Reputation: 874

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.

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.

Upvotes: 0

Views: 1628

Answers (1)

Bahodir
Bahodir

Reputation: 539

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

Upvotes: 0

Related Questions