How can I debug my white screen of my ionic/angular/phonegap/cordova application?

Question

I work on a Ionic project (AngularJS + Apache Cordova aka Phonegap).

The first code's lines of my project are 4 months, and yesterday, the application nolonger works on emulators and real devices, but still work into chrome window. So I suppose my angular code is correct, but I don't know where is the issue, and I didn't know how to handle it.

At the beginning I coded directly in my www folder, and I test it either into chrome with devtools and device emulation, or in chrome with the Apache Ripple extension, and at times I install it into my real device (Nexus S).

I recently installed grunt and bower into my project for common tasks, and I decided to reorganize my project folder.

Then now, I code into a src folder, and :

• before testing in chrome, I run grunt 'dev' tasks witch creates a www folder and includes a dedicated index.html linked to scr/ js, html,css and other res files.
• before testing in emulator or real device, I run grunt 'prod' tasks witch creates a www folder and includes build or copy all the needed files to the the app (app.min.css, app.min.js, templates, fonts and media files, icon).

Both of it work fine in chrome, but when I build (via either cordova-cli or phonegap build) and install the app on emulator or real device, I get the splash screen and then, a permanent white screen.

I tried to debug it with the help of weinre I and note that the js console doesn't catch any thrown error. But I placed some console.log and it appears that the routing is broken.

angular.module('app').run() is executed, but the first controller that is AppCtrl is never executed.

Here is my module code (important parts for this post) :

(function(){ 

    angular.module('app', [
        'ionic',
        'ngCordova',
        'app.auth',
        'app.model',
        'app.action',
        // 'app.test',
    ])

    .run(['$ionicPlatform', 
    function($ionicPlatform) {

        alert("app.run()  runs ...");

    }])

    .config(['$stateProvider','$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        var tmplt_dir = 'modules/app/tmplt';
        var tmplt = function(viewName){
            return tmplt_dir + '/' + viewName + '.html' ;
        };

        $stateProvider

            .state('app', {
                url: "/app",
                abstract: true,
                templateUrl: tmplt('app') ,
                controller: 'AppCtrl'
            })    
            .state('app.main', {
                url: "/main",
                abstract: false,

                views: {
                    "menuContent" : {
                        templateUrl:  tmplt('main') ,
                        controller: 'MainCtrl'
                    }
                }
            })
            .state('app.main.home', {
                url: "/home",
                views: {
                    'homeTabContent' :{
                        templateUrl: tmplt('home') ,
                        controller: 'HomeCtrl'
                    }
                }
            });

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/main/home');  
    }])

    .controller('AppCtrl', [ '$rootScope', '$cordovaToast', '$window',
    function($rootScope, $cordovaToast, $window) {

        alert('AppCtrl runs...');

        $rootScope.notImplementedException = function(){
            var message = "Bientôt disponible.";
            try {
                $cordovaToast.showShortCenter(message);
            } catch(e){
                alert(message);
            }
        };
        $rootScope.browserOpen = function(href){
            var ref = $window.open(href, '_system', 'location=yes');
        };

    }])
    .controller('MainCtrl', [ function() {

        alert('MainCtrl runs...');


    }])    
    .controller('HomeCtrl', [ '$rootScope','$auth', '$app',
    function($rootScope, $auth, $app) {

        alert('HomeCtrl runs...');


        if (!$auth.checkLogin()) {
            $auth.authError();
        }
        $rootScope.appName = $app.name;

    }])

})();

The only alerts that appears is :

• app.run() runs ...

So, the alerts that don't appear are :

• AppCtrl runs...
• MainCtrl runs...
• HomeCtrl runs...

Remember that in chrome, all works perfectly !

This issue is really baffling and I've already lost a few hours to track it, unsuccessfully.

Any idea ?

Solution 1

I solved my problem.

In fact, I wrote an httpRequestInterceptor factory which check if an url have to be signed to use my Rest API.

A recent change of the structure of my project folder causing this factory returning sometimes a wrong result, then signing some local url and causing bad routing, then whitescreen.

Solution 2

1. Run ionic build ios
2. Run ionic emulate ios
3. Open Safari-> Develop -> Simulator -> index.html (for your app)
4. Check console for errors (if any)
5. Press reload (usually on top left) and monitor the console tab for errors.

If you are using Parse (or such), make sure you initialize these before using them in your code. This is a common reason for white screens.

Solution 3

This state does not exists

$urlRouterProvider.otherwise('/app/main/home');  

I think it should be

$urlRouterProvider.otherwise('/home');  

Solution 4

We use gapdebug to debug our ionic applications. You can also debug realtime on your device if its plugged in to the computer and its a very good debugger for any emulator.

View more solutions