ionic Failed to load webpage with error: Could not connect to the server
I'm having an issue with Ionic projects after updating to Xcode 6 and iOS 8.
When trying to run projects I get the following error in Xcode:
Failed to load webpage with error: Could not connect to the server.
The full log is:
2014-10-11 14:08:29.468 test[23293:109668] Apache Cordova native platform version 3.6.3 is starting.
2014-10-11 14:08:29.469 test[23293:109668] Multi-tasking -> Device: YES, App: YES
2014-10-11 14:08:29.495 test[23293:109668] Unlimited access to network resources
2014-10-11 14:08:29.866 test[23293:109668] [CDVTimer][keyboard] 0.079989ms
2014-10-11 14:08:29.866 test[23293:109668] [CDVTimer][TotalPluginStartup] 0.284970ms
2014-10-11 14:08:30.721 test[23293:109668] Resetting plugins due to page load.
2014-10-11 14:08:30.764 test[23293:109668] Failed to load webpage with error: Could not connect to the server.
Even when trying to update Ionic and Cordova and starting a new project this error keeps popping up.
I couldn't find any threads with this particular error and I'm not sure if this is an iOS 8 compatibility issue or something is messed up with my setup.
Thanks!
EDIT:
A bit more info on what's in the index.html and app.js
index.html:
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- compiled CSS -->
<link rel="stylesheet" type="text/css" href="assets/app-0.0.1.css" />
<!-- compiled JavaScript -->
<script type="text/javascript" src="src/app/app.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body >
<ion-nav-view></ion-nav-view>
<!-- Load deferred scripts -->
<!-- Google Maps -->
<script src='http://maps.googleapis.com/maps/api/js?sensor=true&callback=googleMapsLoaded' defer async></script>
</body>
</html>
and app.js (before compilation with the rest of the files using ngbp):
angular.module( 'app', [
'ionic',
// Common requirements
'templates-app',
'templates-common',
// Common Components
'app.auth',
// All page modules
'app.businesses',
'app.business',
'app.search',
'app.branch',
'app.profile',
'app.feed',
// Other dependencies
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider', function myAppConfig ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu/menu.tpl.html",
controller: 'AppCtrl'
});
$urlRouterProvider.otherwise( 'app/feed' );
}])
.run(['$ionicPlatform', 'appAuthService', '$sessionStorage', function($ionicPlatform, appAuthService, $sessionStorage) {
// Initialize ionic styles
$ionicPlatform.ready(function() {
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
StatusBar.styleLightContent();
}
});
// Initialize app authentication service
appAuthService.init();
// Initialize a session cache validation object
$sessionStorage.updated = {};
}])
.controller( 'AppCtrl', ['$scope', '$location', function AppCtrl ($scope, $location) {
}])
;
Answer
I had the same problem.
I opened the ios project in the platform folder via Xcode, but I forgot that the codebase in the Xcode folder was not up to date and therefore broken.
To get the new code in your Xcode project use the command:
ionic cordova prepare ios
If your problem is rooted in the same as mine this should help.