I am having an issue where my ionic app can reach my Node API on redhead in the browser and in the Ionic view app on devices, but not on emulators or devices themselves. I have double checked that I have the whitelist plugin installed and everything in its place. I also opened the allow-intent, allow-navigation and allow origin all the way with no luck. Has anybody else had this or a similar issue where an Ionic app cannot make request to APIs in emulators and devices?
Here is where the error originates from.
In my route I have :
`angular.module('app') .config(function($stateProvider) { $stateProvider .state('app.events', { url: '/events', views: { 'menuContent': { templateUrl: 'app/events/events.html', controller: 'EventsCtrl', resolve: { events: function(DataCache) {
return DataCache.get('events/active').then(function(data) {
return data;
});
}
}
}
}
});
});
`
This resolve calls a DataCache service which looks like this:
`angular.module('app') .service('DataCache', function($q, $http, Loader, CacheFactory, API) { var convertToISO = function(date) { return new Date(date); };
CacheFactory('dataCache', {
maxAge: 60 * 60 * 1000,
cacheFlushInterval: 2 * 60 * 60 * 1000,
deleteOnExpire: 'aggressive',
storageMode: 'localStorage'
});
return {
get: function(dataName) {
var deferred = $q.defer(),
dataCache = CacheFactory.get('dataCache');
Loader.show();
if (dataCache.get(dataName)) {
Loader.hide();
deferred.resolve(dataCache.get(dataName));
} else {
$http.get(API + dataName)
.success(function(data) {
if (dataName === 'twitter') {
angular.forEach(data, function(item) {
if (item.created_at) {
item.created_at = convertToISO(item.created_at);
}
});
}
dataCache.put(dataName, data);
Loader.hide();
deferred.resolve(data);
})
.error(function() {
Loader.hide();
alert('error here');
deferred.reject();
});
}
return deferred.promise;
},
reload: function(dataName) {
var deferred = $q.defer(),
dataCache = CacheFactory.get('dataCache');
Loader.show();
$http.get(API + dataName)
.success(function(data) {
dataCache.put(dataName, data);
Loader.hide();
deferred.resolve(data);
})
.error(function() {
Loader.hide();
deferred.reject();
});
return deferred.promise;
}
};
});
`
in the get function the app will try to make the $http request since no data is available and then fails and get caught in the error catch where you see alert('error here');
Then this triggers a state change error which call this from my main app.js file
` .run(function($ionicPlatform, $ionicLoading, $ionicPopup, $rootScope, $state, Templates, $cordovaNetwork, Network) { $ionicPlatform.ready(function() { var showErrorAlert = function() { $ionicPopup.alert({ title: 'Error retrieving data', template: 'Sorry, there was an error retrieving data. Please try again.' }); }; // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } // load templates Templates.load(); // check if network is online Network.isOnline = $cordovaNetwork.isOnline(); // listen for network to come online $rootScope.$on('$cordovaNetwork:online', function() { Network.isOnline = $cordovaNetwork.isOnline(); }); // listen for network to go offline $rootScope.$on('$cordovaNetwork:offline', function() { alert('offline'); Network.isOnline = $cordovaNetwork.isOnline(); });
$rootScope.$on('$stateChangeError', function(event) {
event.preventDefault();
showErrorAlert();
return $state.go(arguments[3]);
});
});
`
