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:

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

Example of Node-gallery used in isolation, displaying an error event with the message "ENOENT"

Utilizing Enum Lowercase as Index Key Type in TypeScript

Exporting a Typescript class from one module and importing it into another module

Fetching an image from a fixed storage location with the help of Express JS in Angular 2

Retrieving user data from Ngrx store upon page refresh

By utilizing custom typeRoots while continuing to export these types alongside the entry point

Problems with NPM Installation on Windows 7

Developing Angular dynamic components recursively can enhance the flexibility and inter

What is the best way to initiate the registration page through the @auth0/auth0-react library?

Why is it necessary to update npm each time I add a new library to my project?

TS - Custom API hook for making multiple API requests - incompatible type with 'IUseApiHook'

The specified file ngx-extended-pdf-viewer/assets/pdf.js cannot be found

Achieving the incorporation of multiple components within a parent component using Angular 6

Validating properties of a class using Typescript's Class-Validator

Modify associated dropdown menus

Guide on properly specifying mapDispatchToProps in a component's props interface

Creating a unique Elastic IP address for a single EC2 instance with the AWS CDK

Why am I unable to use a string as the src in next/image component?

Heroku Application Experiencing Crashes Due to Absence of 'request-promise' Module

How can I capture the click event on the oktext in Ionic?