Ionic 2 SignalR 错误“请确保在 SignalR 客户端 JavaScript 文件之前引用 jQuery。”答案

【问题标题】：Ionic 2 SignalR error " Please ensure jQuery is referenced before the SignalR client JavaScript file."Ionic 2 SignalR 错误“请确保在 SignalR 客户端 JavaScript 文件之前引用 jQuery。”
【发布时间】：2017-10-06 13:35:39
【问题描述】：

我正在尝试在 ionic 2 应用程序中使用 signalR。对于 signalR 我正在使用 ms-signalr-client图书馆。

索引.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Ionic App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">

    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#4e8ef7">

    <!-- cordova.js required for cordova apps -->
    <script src="cordova.js"></script>




    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <link href="build/main.css" rel="stylesheet">

</head>
<body>

    <!-- Ionic's root component and where the app will load -->
    <ion-app></ion-app>

    <!-- The polyfills js is generated during the build process -->

    <script src="build/polyfills.js"></script>
    <script src="build/main.js"></script>

    <!-- The bundle js is generated during the build process -->
    <!-- Zone.js and Reflect-metadata  -->
    <script src="build/js/Reflect.js"></script>
    <script src="build/js/zone.js"></script>

<!--Below added jquery and signal-->
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../jquery.signalR.js"></script>   

</body>
</html>

在这里使用

 import { Injectable } from '@angular/core';
    import $ from 'jquery';
    import 'ms-signalr-client';
    import 'rxjs/Rx';

    @Injectable()
    export class SignalRService {



        connection: hubConnection;
        hubProxy:any;


        constructor() {


        }


        startConnection() {
            console.log("Stage 1");
            this.connection =$.hubConnection('http://192.168.0.213:9000');//Server Deployed


            console.log("Stage 2");

            this.hubProxy = this.connection.createHubProxy('broadcaster');


            console.log("Stage 3");

            this.connection.start({ jsonp: true })
                .done(() => {
                    console.log('Now connected, connection ID=' + this.connection.id);


                })
                .fail((err) => {
                    console.log('Could not connect');

                });
        }           

    }

但是每次都会出现这个错误。我已经搜索但没有找到任何解决方案。

未捕获的错误：未找到 jQuery。请确保在 SignalR 客户端 JavaScript 文件之前引用 jQuery。

注意：我也厌倦了这个库，但它有一个问题。

Issue:Ionic 2 signalr is not connecting with hub

【问题讨论】：

尝试将<script src="https://code.jquery.com/jquery-1.6.4.js" integrity="sha256-VJZPi1gK15WpYvsnBmcV0yga4a0Toov4rt1diFnrrjc=" crossorigin="anonymous"></script> 添加到<head></head> 部分
好的，我正在尝试，会通知你
@Dennis1679 不是它不起作用。
嗯，错误很明显，因为您正在加载 SignalR /before/ jquery。所以解决方法应该是把jquery
我可以在您的代码中看到您在 SignalR 脚本之前已经拥有 Jquery，但就我而言，我遇到了完全相同的问题。虽然没有使用您引用的库。我在想，您是否 100% 确定“../node_modules/..etc”是您的文件所在的位置？意思是，文件夹 node_modules 在您的应用程序的根级别上吗？

标签： ionic2 signalr

【解决方案1】：

参考这个Ng2-signalr。我只是复制代码，现在可以正常工作了。

import 'expose-loader?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';

【讨论】：

【解决方案2】：

我让它工作的唯一方法是将这样的代码添加到供应商文件的顶部：

import 'expose-loader?$!expose-loader?jQuery!jquery';
import './node_modules/signalr/jquery.signalR.min.js';

jQuery 应该可以通过别名在全球范围内使用，这就是为什么我在 webpack 配置中将 explose-loader 导入与 ProvidePlugin 一起使用：

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
})

请注意，signalR 可以使用 jQuery 版本 2 或更高版本。

希望这会有所帮助。

【讨论】：