What to do when Ionic shows a blank page without any error

While developing Ionic apps, you will experience a lot with this, blank page just shows up with no error, so do I.

Here what I found so far when Ionic displays blank.

1. UI Router states hang up while resolving

As you know, Ionic routes make use of Angular UI Router to navigate pages. So one thing you should pay attention is the resolve option.

This is what said from the wiki page,

You can use resolve to provide your controller with content or data that is custom to the state.resolve is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

The resolve property is a map object. The map object contains key/value pairs of:

key — {string}: a name of a dependency to be injected into the controller.

factory — {string|function}:

If string, then it is an alias for a service.

Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before the controller is instantiated and its value is injected into the controller.

Apparently, “if any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.” .

Okay, what if promises are not resolved?

— Answer: please check your logic.

I also mentioned about this in one of previous posts.

2. Forget the pre- slash in state url

Can you spot the different between this,

$stateProvider.state('main', { url: '/main' ... }

and this?

$stateProvider.state('main, { url: 'main' ... }

That pre-slash in state url is very important, you forget it, you get a blank page.

3. Browser cache

One of the weirdest thing, I experienced with Ionic blank page is from browser cache. Seriously, just disable browser caching while you are developing web apps.

4. Quick navigation produces blank page

This issue is also mentioned here, https://github.com/driftyco/ionic/issues/4369

It happens with all current Ionic versions, that is, from 1.1.1 and lower.

By looking at the source of $ionicHistory.goBack(), I spot this block,

if (clearStateIds.length) {
  $timeout(function() {
    self.clearCache(clearStateIds);
  }, 600);
}

The clearCache() function is indeed doing the job of destroying all cached views.

When the clear condition matches, the service will destroy all cached views, along with navigating to the back view. However, when the back view is navigated successfully, and clearCache() just starts to do its job…accidentally, it destroys the current displaying view, which was the back view. That’s why you see a blank page with a dark background with no error being shown.

The fix is to reduce the timeout for clearing cache, 600ms seems to be quite a long waiting time and users can jump to two pages in this duration; so, reducing the cache clearance waiting time will work.

You can try yourself, find this line 47596, and reduce time to around 300–350ms.

if (clearStateIds.length) {
  $timeout(function() {
    self.clearCache(clearStateIds);
  }, 300);
}

It should be working fine for now.

5. Incorrect state view

Let’s see if you can spot anything wrong in the following state definition.

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

.state('join', {
  url: "/join",
  views: {
    'menuContent' :{
      templateUrl: "templates/join.html",
      controller: 'joinCtrl'
    }
  }
})
.state('app.search', {
  url: "/search",
  views: {
    'menuContent' :{
      templateUrl: "templates/search.html",
      controller: 'searchCtrl'
    }
  }
})

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

As you can see, the clear intent here is to make join state as a separate view running on its own. However, wrong view name indication here,

.state('join', {
  url: "/join",
  views: {
    'menuContent' : {  // <--- Does join really have parent view? NO.
      templateUrl: "templates/join.html",
      controller: 'joinCtrl'
    }
  }
})

Solution is to remove menuContent to empty string, or define as a regular state.

.state('join', {
  url: "/join",
  templateUrl: "templates/join.html",
  controller: 'joinCtrl'
})

I found this use case here, http://stackoverflow.com/questions/25904197/ionic-routing-issue-shows-blank-page

There will be more scenarios …

I will find and update if there is any use case that cause the blank page and update here, or you can share any case you meet with me, I will make it a list for Ionic blank page symptoms troubleshooting.

Enjoy :)