PhoneGap Angular iOS App displaying white screen only
Question
We've built a HTML/JS iOS app using Angular which works perfectly on desktop browsers but when I wrap it up as PhoneGap project and try to run it on my device, it simply loads the splash screen which fades out to a blank white screen. I've been looking around for similar issues with the routing maybe? I just can't figure it out. Can anybody help?
HTML
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid-12.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript">
var is_ios = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
if (is_ios) {
$('<link rel="stylesheet" type="text/css" href="css/iosbugfix.css" />').appendTo("head");
};
</script>
<base href="/">
</head>
<body ng-app="appItmt" ng-controller="dataController">
<div ng-view></div>
</body>
</html>
app.js
(function () {
var itmtApp = angular.module("appItmt", ["ngRoute", "cgBusy"]);
itmtApp.config([
'$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/how-to/', {
templateUrl: 'how-to.html',
controller: 'dataController'
})
.when('/privacy/', {
templateUrl: 'privacy.html',
controller: 'dataController'
})
.when('/about/', {
templateUrl: 'about.html',
controller: 'dataController'
})
.otherwise({
templateUrl: 'main.html',
controller: 'dataController'
});
$locationProvider.html5Mode(true);
}
]);
}());
3 answers
solution1
0 2016-06-30 18:46:46
You should wait for the deviceready event before running your JavaScript. See the Cordova documentation for this here .
This signals that PhoneGap/Cordova is ready to go and it is safe to run JavaScript.
solution2
0 2016-06-30 18:49:34
Try following code this may help:
Change your config.xml in yourapp/platforms/ios/cordova/ and add following preference:
<preference name="ShowSplashScreenSpinner" value="false" />The add following code to your app.js:
angular.module('starter.controllers', []) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { setTimeout(function() { navigator.splashscreen.hide(); }, 100); }); })
Try rebuilding your application : $ ionic build ios
And try it $ ionic emulate ios .
Hope this helps.
solution3
0 2016-09-16 08:57:22
I had the same problem. What makes debugging worse is that app runs ok with ionic run android but not with ionic build android
What I found out is that my app works fine without <base href="/"> which at the same time means I have to remove $locationProvider.html5Mode(true);
Then I found the answer here
When building the app base should be changed to <base href=".">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.