title: How can I debug my white screen of my ionic/angular/phonegap/cordova application?
body: <p>I work on a <a href="http://ionicframework.com/">Ionic</a> project (<a href="https://angularjs.org">AngularJS</a> + <a href="http://cordova.apache.org/">Apache Cordova</a> aka Phonegap).</p>
  
  <p>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.</p>
  
  <p>At the beginning I coded directly in my <code>www</code> 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).</p>
  
  <p>I recently installed grunt and bower into my project for common tasks, and I decided to reorganize my project folder.</p>
  
  <p>Then now, I code into a <code>src</code> folder, and :</p>
  
  <ul>
  <li>before testing in chrome, I run grunt 'dev' tasks witch creates a <code>www</code> folder and includes a dedicated index.html linked to <code>scr/</code> js, html,css and other res files.</li>
  <li>before testing in emulator or real device, I run grunt 'prod' tasks witch creates a <code>www</code> 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).</li>
  </ul>
  
  <p>Both of it work fine in chrome, but when I build (via either cordova-cli or <a href="https://build.phonegap.com">phonegap build</a>)  and install the app on emulator or real device, I get the splash screen and then, a permanent white screen. </p>
  
  <p>I tried to debug it with the help of <a href="http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html">weinre</a> 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. </p>
  
  <p><code>angular.module('app').run()</code> is executed, but the first controller that is AppCtrl is never executed.</p>
  
  <p>Here is my module code (important parts for this post) :</p>
  
  <pre><code>(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;
  
      }])
  
  })();
  </code></pre>
  
  <p>The only alerts that appears is :</p>
  
  <ul>
  <li>app.run()  runs ...</li>
  </ul>
  
  <p>So, the alerts that don't appear are :</p>
  
  <ul>
  <li>AppCtrl runs...</li>
  <li>MainCtrl runs...</li>
  <li>HomeCtrl runs...</li>
  </ul>
  
  <p>Remember that in chrome, all works perfectly !</p>
  
  <p>This issue is really baffling and I've already lost a few hours to track it, unsuccessfully.</p>
  
  <p>Any idea ?</p>