角5 + SignalR（DefinitelyTyped） - 名前 '$'を見つけることができません

Question

私はSignalR私の角度5アプリケーションで使用しようとしています。

私はをDefinitelyTyped からこれらの強力な型指定されたインストール：私のpackages.jsonに

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

活字体をバージョン2.5.3 示しています。

今、私はこのようにそれを使用しようとしている：

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

コンパイラは、次のと文句を言う：

error TS2304: Cannot find name '$'. 

...インテリセンスが$.hubを見つけることができるにもかかわらず：

---

ファイルにdeclare var $ :any;を追加しようとするとコンパイルされますが、ブラウザのコンソールに別のエラーが表示されます：$.hubConnection is not a function。

何か不足していますか？これらの手順を実行する必要があり

Answer 1

角度でSignalRを使用するには：

はjqueryの、NPMを使用してsignalrパッケージをインストールします。

npm install signalr 
npm install jquery 

は、タイプを追加します。

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

はangular-するためのスクリプトを追加します。 cli.json

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

そして、あなたが追加する必要がサービス中：

declare var $: any; 

単純な角度のコード例：

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