Unknown provider: $cordovaNetworkProvider error


#1

@Calendee @mhartington I am trying to check internet connectivity in my ionic cordova program in android and I am encountering the above error when I use $cordovaNetwork. Any idea why? Basically I have a requirement of making ionic app run offline using sqlite…for this I need to put a check if internet is there or not

I am encountering the following error on inspection

Error: [$injector:unpr] Unknown provider: $cordovaNetworkProvider <- $cordovaNetwork
http://errors.angularjs.org/1.2.12/$injector/unpr?p0=%24cordovaNetworkProvider%20<-%20%24cordovaNetwork


#2

Have you installed the cordova network information plugin?
Write this on your CLI cordova plugin add org.apache.cordova.network-information


#3

Search for $cordovaNetwork on this page : http://ngcordova.com/docs/

It shows how to do it properly. I’ve never used the ngCordova implementations; so, I don’t have much more help to offer.


#4

Yes I have installed it through command line…but the Network.js and Connection.js files present in www folder give the error “Uncaught reference error: Module not defined” & “require not defined”. So I had to shun using those files


#5

Thanks @Calendee. The link you shared works perfectly fine for Browsers. navigator.onLine detects internet availability in browser but the same is not reflected when we test in phones. In my android phone, even in airplane mode, the app says it has internet connect(with WIFI turned off). IS there an alternative for using “navigator.onLine” in angular JS?


#6

I just use the vanilla cordova plugin and do this:

    $scope.checkConnection = function() {

        if(navigator && navigator.connection && navigator.connection.type === 'none') {
            return false;
        }

        return true;

    };

#7

just anobservation are you sure you have includied ng-cordova.js properly?

in index.html

<!-- ng-cordova have to be before cordova -->
<script src="lib/ng-cordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

and in you controllers module needs ngCordova:

var starterControllers = angular.module(‘starter.controllers’, [‘appServices’, ‘ngCordova’]);

i’m not sure if its to any help but the full example can be found here:

though the example has some problems when doing calls outside the function scopes (long story: ngCordova $cordovaNetwork, navigator / navigator.connection and ionic deviceready?)

so you might just rather go with the solution by calendee for now

//

pelle


#8

I just use the vanilla cordova plugin too.
I found it easier to work with (maybe it’s because i’ve used it before that way)

I usually use it in a .run on the main module like this

$rootScope.checkConnection = function(){
	var networkState = navigator.connection.type;

	var states = {};
	states[Connection.UNKNOWN]  = 'Unknown connection';
	states[Connection.ETHERNET] = 'Ethernet connection';
	states[Connection.WIFI]     = 'WiFi connection';
	states[Connection.CELL_2G]  = 'Cell 2G connection';
	states[Connection.CELL_3G]  = 'Cell 3G connection';
	states[Connection.CELL_4G]  = 'Cell 4G connection';
	states[Connection.CELL]     = 'Cell generic connection';
	states[Connection.NONE]     = 'No network connection';

	console.log(' + app: Connection type: ' + states[networkState]);
};

$rootScope.onOffline = function(){
	console.log("You Are Offline :(");
	$rootScope.appOffline = true;
};

$rootScope.onOnline = function(){
	console.log("You Are Online :D");
	$rootScope.appOffline = false;
	$rootScope.loadServer();
};

// Funciones eventlistener de deviceready
//=================================================
$ionicPlatform.ready(function() {
	console.log(" + app: DeviceReady");

	$rootScope.checkConnection();
	document.addEventListener("offline", $rootScope.onOffline, false);
	document.addEventListener("online", $rootScope.onOnline, false);

});

#10

1)Approach one
myApp.controller(‘RequestAccessCtrl’, function ($scope, $rootScope, $ionicLoading, $ionicPlatform)//, $cordovaNetwork)
{
debugger

if (navigator.onLine) {
alert("Internet available ");
} else {
alert("Internet not available ");
}

});

The above code works fine in chrome but no in device. In device it always says internet available.

  1. Approach two
    myApp.controller(‘LoginCtrl’, function ($scope, $rootScope, LoginService, $ionicLoading, $ionicPopup, $ionicPlatform, $ionicModal, $cordovaNetwork)
    { //ngCordovaService)

    $rootScope.User = “”;
    var type = $cordovaNetwork.getNetwork();
    var isOnline = $ cordovaNetwork.isOnline();
    var isOffline = $ngCordovaService.isOffline();
    alert(isOffline);

    $ionicModal.fromTemplateUrl(‘templates/modal-Login.html’, function ($ionicModal) {

    });
    The above code fails when I append $cordovaNetwork. We also tried using ngCordovaService. This also fails in the browser.

http://snag.gy/j9h91.jpg is the link for screenshot when I use ngCordova. I followed the following steps. Correct me if I am wrong:

  1. ngCordova Custom Build and clicked on ‘network information’,built it. It downloaded “ngCordova.js” [please note the filename. its not ng-cordova.js as mentioned in the docs]
  2. I added this file in lib/ionic/js path
  3. In my controller, I appended [ngCordova]

Now when I run my app in the browser, it shows the attached error


#11

This error will happen con browsers even if everything is well installed on your app.

Basically the error in browsers is because Cordova is not loaded unless you run a real app.

Try to ‘Cordova build android’ , ‘Cordova run android’ and there everything should run as expected.

Also, for my approach you don’t need ngCordova at all.


#12

Thanks @Bonda I did build the app in the phone using ionic build android. With/Without ngCordova I see no output. Please see my steps in the edited question


#13

Try following steps;

@rushme1986 make sure to follow below steps correctly

  1. Download ng-Cordova plugin https://github.com/driftyco/ng-cordova/

  2. Unzip the folder and find the ng-cordova.js file under the flder ng-cordova-master\dist

  3. Install the cordova plugins

    cordova plugin add org.apache.cordova.network-information

  4. Take the ng-cordova.js file reference on index.html page

  5. Add cordova dependency on app.js file

angular.module(‘classifiedApp’, [‘ionic’, ‘ngCordova’, ‘classifiedApp.controllers’, ‘classifiedApp.services’])…

  1. Add dependency network object in your controller
    .controller(‘HomeCtrl’, function($scope, $rootScope, $ionicLoading, Parse, $cordovaNetwork) {

    var isOnline = $cordovaNetwork.isOnline();
    })

Finally it should work


#14

I followed all your steps, here is the error
TypeError: Cannot read property ‘type’ of undefined
at Object.isOnline (http://localhost:53757/ng-cordova.js:855:46)
at new (http://localhost:53757/js/Controllers/RequestAccessController.js:13:36)
at invoke (http://localhost:53757/lib/ionic/js/ionic.bundle.js:11168:17)
at Object.instantiate (http://localhost:53757/lib/ionic/js/ionic.bundle.js:11179:23)
at $get (http://localhost:53757/lib/ionic/js/ionic.bundle.js:14238:28)
at updateView (http://localhost:53757/lib/ionic/js/ionic.bundle.js:37830:30)
at IonicModule.directive.directive.compile.eventHook (http://localhost:53757/lib/ionic/js/ionic.bundle.js:37777:17)
at Scope.$get.Scope.$broadcast (http://localhost:53757/lib/ionic/js/ionic.bundle.js:19719:28)
at $state.transitionTo.$state.transition.resolved.then.$state.transition (http://localhost:53757/lib/ionic/js/ionic.bundle.js:31680:22)
at deferred.promise.then.wrappedCallback (http://localhost:53757/lib/ionic/js/ionic.bundle.js:18423:81) ionic.bundle.js:16893

Can you kindly post something on codepen which is working source code @pahamad?
To cross verify my issue I tried installing another plugin cordova plugin add org.apache.cordova.dialogs for dialogs. I still encounter the issue but the error now says “TypeError: Cannot read property ‘alert’ of undefined” I referred the cordovaDialog example mentioned in the docs


#15

@rushme1986 I will try at my end and then will you know.

For alert you can use ionic inbuild alert dialouge it’s really nice. You can find here working example:


#16

@rushme1986 check android menifest fle is ther permission given:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" /> 

If not then please add both line


#17

@rushme1986 if in case you are getting issue Connection undefined then modify ng-corfova.js file and change the code for offline/online as:

isOnline: function () {      
      var networkState = navigator.connection.type;
      return networkState !== 'unknown' && networkState !== 'none';
    },

    isOffline: function () {
      var networkState = navigator.connection.type;
      return networkSate === 'unknown' || networkState === 'none';
    }

May be ng-cordova team member will he help us why Connection is getting undefined.