Showing Blank White Screen

Greetings, whenever I try and run my Ionic App on my iPhone it shows the cordova splash screen then goes to a blank white screen. I can’t tell any errors in x-code. The app works perfectly in ionic serve.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Monstercat Fan App</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/lib/angular-material/angular-material.css">
    <link rel="stylesheet" href="css/owl.carousel.css">

    <!-- ionic/angularjs js -->
    <script src="/lib/ionic/js/ionic.bundle.js"></script>
    <script src="/lib/angular-aria/angular-aria.js"></script>
    <script src="/lib/angular-animate/angular-animate.js"></script>
    <script src="/lib/hammerjs/hammer.js"></script>
    <script src="/lib/angular-material/angular-material.js"></script>
    <script src="/lib/angular-resource/angular-resource.js"></script>

    <!-- other libraries -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
  </head>
  <body ng-app="Monstercat">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('Monstercat', ['ionic', 'Monstercat.controllers', 'ngResource', 'ngMaterial'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // 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) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($mdThemingProvider, $urlRouterProvider, $stateProvider) {
  $mdThemingProvider.theme('default')
    .primaryColor('deep-purple')
    .accentColor('cyan');

  $stateProvider

    .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.home', {
    url: "/home",
    views: {
      'menuContent': {
        templateUrl: "templates/main.html",
        controller: 'MainCtrl'
      }
    }
  })

  .state('app.release', {
    url: "/release",
    views: {
      'menuContent': {
        templateUrl: "templates/newrelease.html",
        controller: 'NewVidCtrl'
      }
    }
  })

  .state('app.artists', {
    url: "/artists",
    views: {
      'menuContent': {
        templateUrl: "templates/artists.html"
      }
    }
  })

  .state('app.albums', {
    url: "/albums",
    views: {
      'menuContent': {
        templateUrl: "templates/albums.html"
      }
    }
  })

  .state('app.reddit', {
    url: "/reddit",
    views: {
      'menuContent': {
        templateUrl: "templates/reddit.html",
        controller: 'FeedCtrl'
      }
    }
  })

  .state('app.wiki', {
    url: "/wiki",
    views: {
      'menuContent': {
        templateUrl: "templates/wiki.html",
      }
    }
  })

  .state('app.credits', {
      url: "/credits",
      views: {
        'menuContent': {
          templateUrl: "templates/credits.html",
        }
      }
    })
    // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
});
2 Likes

I have tried updating Cordova and Ionic, and starting a new project and neither have worked.

Are you getting any errors in your console?

You can debug you the ios app with safari remote debugging.

1 Like

Thank’s for the reply @mhartington!,

In the XCode console it is not giving me any errors, I am just building and lauching from the xcode project file. How do I enable remote debugging?

When I run in chrome or safari with ionic serve it works perfectly.

Running on iPhone from ionic serve also returns no errors through remote debugging.

The same problem is with android too. I have already reported this problem, but none responded. When it can be fixed?

2 Likes

Hopefully soon, my best guess is that it may be something with routing and rendering the DOM. In my index.html page if I make a heading and say test it will render on the device, so I know cordova and WebKit is working. Angular may just not be passing the file to the DOM.

So does anybody have a fix?

i’m getting this also, I am able to run the project in a web browser and simulator, but the app will not run on my phone, It executes the index.html and stops on a white screen.

No logging, no errors nothing. any ideas?

I should say I have iPhone 5s with iOS 8.x

The same problem here using plain angular without Ionic, the problem is that $urlRouterProvider.otherwise(’/home’); is not working, so at the first load of the app there are any state active so the page remains blank. I have no idea how to solve this, any help could be really helpful!

2 Likes

I was right, that is the problem, i add

$timeout(function() {
    $state.go('home');
}, 5000);

To the run part and it worked.!!!

1 Like

Thanks! When all else fails use a timeout.

@leanzubrezki, I am having the same problem, when I load my app on the android device, it shows a white screen. I tried adding your code to the run part but it did not work

1 Like

I am having the same.
Btw, when I run my app with additional flags

ionic emulate platform android -l -s -c

No errors found, but when I run

ionic run android

I’ve had white screen.

Environment:
Cordova - v4.3.0
ionic - 1.0.0-beta.13

Please let me know if you find the way for resolving.

1 Like

Still not working, I have been stuck on this all day.

Whenever I’ve gotten the blank white screen it is because of a dependency link is broken or I’m using some part of ionic/angular that I didn’t import into my service or controller. For example, using $stateParams without defining it in the controller definition.

If I were you I would look at console logs and look for a stack trace or something that hints at something going wrong during booting of your app.

Like I said, I’ve encountered this multiple times and its always been something like a compiler error or a broken reference.

1 Like

The problem is a dependencie bronken in the .run or in the .config face. Check that.

where do i put this timeout in the code? can you provide example of where you placed it?

2 Likes

for me it was <base href="/"> html tag. it seems like it somehow brakes ui.router in device cordova-browser, but not in desktop browser

3 Likes

While developing an app with Ionic my team encountered the dreaded “white screen of death” on two separate occasions and resolved it both times. Here’s some suggestions that worked for us.

Firstly, run a JavaScript linter to make sure your code doesn’t contain any potential issue-causing syntax. We used jshint with Grunt and it helped us find out that we weren’t properly returning a function that was being used by a controller. For some reason this worked in the browser but caused a white screen on mobile. A simple quick fix and we were up and running again.

If you still have issues, check your dependencies. At another point we were using angular-leaflet-directive in one of our controllers to display a map. Again, this worked fine in the browser but caused a white screen on mobile. We removed the directive and implemented leaflet with regular old JavaScript and it turned out just fine. Hope this helps!

2 Likes