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

Question

I am working on an Ionic project ( AngularJS + Apache Cordova aka Phonegap).

The first lines of my project code are 4 months, and yesterday the nolonger application works on emulators and real devices, but it still works in a chrome window. Therefore, I assume that my angular code is correct, but I do not know where the problem is, and I did not know how to handle it.

In the beginning, I encoded directly in my www folder, and I test it either in chrome using devtools and device emulation, or in chrome with the Apache Ripple extension, and sometimes I install it on my real device (Nexus S).

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

Then now I have the code in the src folder and:

• before testing in chrome, I run the grunt "dev" tasks, creating the www folder and include the dedicated index.html associated with scr/ js, html, css and other res files.
• before testing in the emulator or on a real device, I run the "prod" tasks that create the www folder and include assembling or copying all the necessary files to the application (app.min.css, app.min.js, templates, fonts and media files, icon )

Both of them work fine in chrome, but when I create (via a cli-cord or telephone line ) and install the application on an emulator or on a real device, I get a screensaver, and then a constant white screen.

I tried debugging it using weinre i and note that the js console does not detect any abandoned error. But I put some console.log, and it seems that the routing is broken.

angular.module('app').run() is executed, but the first controller, which 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; }]) })(); 

Only the following warnings appear:

• app.run () works ...

So, the warnings that are not displayed are as follows:

• AppCtrl launches ...
• MainCtrl launches ...
• HomeCtrl works ...

Remember that in chrome everything works fine!

This question is really puzzled, and I have already lost several hours to track it, to no avail.

Any idea?

Answer 1

I solved my problem.

In fact, I wrote an httpRequestInterceptor factory that checks to see if the URL needs to be signed in order to use my Rest API.

A recent change in the structure of the project folder, as a result of which this factory sometimes returned the wrong result, then signed the local url and caused poor routing, and then whitescreen.

Answer 2

• Run ionic build ios
• Run ionic emulate ios
• Open Safari-> Develop → Simulator → index.html (for your application)
• Check the console for errors (if any)
• Click reboot (usually in the upper left corner) and look at the console tab for errors.

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

Answer 3

This condition does not exist.

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

I think it should be

 $urlRouterProvider.otherwise('/home'); 

Answer 4

We use gapdebug to debug our ionic applications. You can also debug real time on your device if it is connected to a computer and is a very good debugger for any emulator.

Answer 5

For me, I solved it by replacing it

 $stateProvider.state('nameOfState', { templateUrl: '/templates/nameOfTemplate.html', }) 

With the help of this

 $stateProvider.state('nameOfState', { templateUrl: './templates/nameOfTemplate.html', }) 

Answer 6

Try adding "." before the full url in "templateUrl". Worked for me!