Usman lqbal
Usman lqbal

Reputation: 974

Ionic 2 SignalR error " Please ensure jQuery is referenced before the SignalR client JavaScript file."

I'm trying to use signalR in ionic 2 app .For signalR im using ms-signalr-client library.

Index.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>

Using here

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

                });
        }           

    }

But this error appear every time. I have search but didn't find any solution.

Uncaught Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

Note: I have tired this library as well but it has an issue .

Issue:Ionic 2 signalr is not connecting with hub

Upvotes: 0

Views: 1582

Answers (2)

Khasky
Khasky

Reputation: 130

The only way I get it to work is by adding such code to the top of a vendors file:

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

jQuery should be available globally through aliases that's why I use explose-loader import together with ProvidePlugin in webpack config:

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

Please note, you can use jQuery version 2 or above for signalR.

Hope this will help.

Upvotes: 0

Usman lqbal
Usman lqbal

Reputation: 974

In reference to this Ng2-signalr .I just copy code and its working fine now .

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

Upvotes: 2

Related Questions