2

I'm trying to use SignalR in my Angular 5 application.

I installed these strong typed from DefinitelyTyped:

npm install --save @types/jquery
npm install --save @types/signalr

Typescript in my packages.json shows version 2.5.3.

Now I'm trying to use it like this:

import { Injectable } from '@angular/core';

@Injectable()
export class SignalRService {

    constructor() {}

    public ConnectTo(url: string): void {

        var hubConnection = $.hubConnection();
        var hubProxy = hubConnection.createHubProxy('DashboardHub');
        hubProxy.on('Example', (e: any) => {
            console.log('worked');
        });

        hubConnection.start();
    }
}

The compiler complains with the following:

error TS2304: Cannot find name '$'.

...even though intellisense can find $.hub:

Image showing intellisense

If I try adding declare var $ :any; to my file, it compiles but I get another error in browser's console: $.hubConnection is not a function.

Am I missing something?

Alisson Reinaldo Silva
  • 10,009
  • 5
  • 65
  • 83
  • You didn't declare $ yet : [reference to another thread](https://stackoverflow.com/questions/43934727/how-to-use-jquery-plugin-with-angular-4) – Jan Somers JanS91 Nov 24 '17 at 14:14
  • @JanSomersJanS91 I thought this was an older way of doing this, whereas DefinitelyTypes would make this not to be required anymore. Anyway, if I add that, I get `$.hubConnection is not a function`. – Alisson Reinaldo Silva Nov 24 '17 at 14:17
  • Hmm strange that that isn't working ... maybe you could try [this](https://stackoverflow.com/a/46113678/7018180) – Jan Somers JanS91 Nov 24 '17 at 14:19
  • 1
    @JanSomersJanS91 I tried `npm install jquery --save` and adding it to `angular-cli.json`, still `$.hubConnection is not a function`. – Alisson Reinaldo Silva Nov 24 '17 at 14:32

1 Answers1

11

To use SignalR in Angular you need to do these steps:

Install jquery, signalr packages using npm:

npm install signalr
npm install jquery

Add types:

npm install --save @types/jquery 
npm install --save @types/signalr

Add scripts to angular-cli.json

"apps": [{
    "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/signalr/jquery.signalR.min.js"
    ],
}]

And in service you need to add:

declare var $: any;

Simple Angular code example:

import { Injectable } from '@angular/core';

declare var $: any;
@Injectable()
export class SignalrService {
    private connection: any;
    private proxy: any;
    private ulr: any;

    constructor() {}

    public startConnection(): void {
        this.connection = $.hubConnection(this.url);
        this.proxy = this.connection.createHubProxy('ProcessingHub');

        this.connection.start().done((data: any) => {
            console.log('Connected to Processing Hub');
            this.sendMessage();
        }).catch((error: any) => {
            console.log('Hub error -> ' + error);
        });
    }

    public sendMessage(): void {
        this.proxy.invoke('SendMessage', 'test')
           .catch((error: any) => {
               console.log('SendMessage error -> ' + error); 
            });
    }
}
Gerimantas
  • 126
  • 2
  • 5