Error Message: Angular 5 with SignalR (DefinitelyTyped) - '$' Not Found in Typings

Question

Error Message: Angular 5 with SignalR (DefinitelyTyped) - '$' Not Found in Typings

I am currently working on implementing SignalR into my Angular 5 application.

To do this, I added the following TypeScript type definitions from DefinitelyTyped:

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

The version of Typescript in my packages.json is 2.5.3.

Here is how I'm attempting to use SignalR:

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();
    }
}

However, the compiler is showing the following error:

error TS2304: Cannot find name '$'.

Interestingly, intellisense can recognize $.hub:

https://i.sstatic.net/X1kgP.png

I tried adding declare var $ :any; to my file which resolved the compile error, but resulted in another error in the browser's console:

$.hubConnection is not a function

.

Am I overlooking something crucial?

angular typescript npm signalr

Answer 1

Answer №1

If you want to incorporate SignalR into Angular, follow these steps:

Begin by installing the jquery and signalr packages using npm:

npm install signalr
npm install jquery

Next, add the necessary types:

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

Include the scripts in your angular-cli.json file:

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

In your service file, ensure to declare $ as any:

declare var $: any;

Here's a simple example of Angular code for SignalR integration:

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); 
            });
    }
}

Answer 2

If you want to incorporate SignalR into Angular, follow these steps:

Begin by installing the jquery and signalr packages using npm:

npm install signalr
npm install jquery

Next, add the necessary types:

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

Include the scripts in your angular-cli.json file:

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

In your service file, ensure to declare $ as any:

declare var $: any;

Here's a simple example of Angular code for SignalR integration:

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); 
            });
    }
}

Error Message: Angular 5 with SignalR (DefinitelyTyped) - '$' Not Found in Typings

Answer №1

Similar questions

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

Typescript Support in Goland IDE for HTML Documents

What is the best way to manage the connections in my D3 tree chart?

Having conflicting useEffects?

typescript error: Unable to access properties of an undefined value

Encountering a node-sass error when running npm update

Circular dependency in Angular between two components

I need to print out a table, but when I preview the print, I want to rotate the entire page for better visibility

Tips for retrieving the most recent number dynamically in a separate component without needing to refresh the page

Issues with ng2-pdf-viewer arising in Angular versions 12 and above

Looking for guidance on integrating REST API consumption features into Ionic Framework 3.x?

The concept of callback function overloading using generic types in TypeScript

Issue: NG04002 encountered post migration from Angular to Angular Universal

typescript throwing an unexpected import/export token error

The blur event in Angular Material's mat-date-range-input does not trigger if the End Date is not selected

What is the best way to send data to the ng2-smart-table renderComponent using an HTTP request?

npm pack is taking an unusually long time to complete

Having trouble with installing Vue CLI?

Incorporating external scss files into next.js (react) for seamless loading

Angular2 - receiving real-time notifications about service data updates