CODEWITHSUNDEEP
androidcordovaionic-frameworkroutesui-sref
Ada Orajiaku
Ada Orajiaku

Reputation: 146

ionic shows white screen on Android device and emulator - suspecting routing issue?

The application works well on a browser but shows a blank white screen when I deploy on an android device or emulator.

Deploying on iOS emulator shows a bank background but also shows blank on a device as well.

I suspect it's a routing issue because it shows the navbar when I place it directly on the body of the index.html

Here's a snippet of the index.html

angular.module('ilearn.routes', [])

//Configure view routes
.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider

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


        .state('app.activity', {
            url: '/activity',
            views: {
                'menuContent': {
                    templateUrl: 'templates/network/Activity.html'
                }
            }
        })
        $urlRouterProvider.otherwise('/app/dashboard');
});
<script>...scripts</script>
</head>

<body ng-app="app">
    <ion-nav-view></ion-nav-view>
</body>

The menu.html file is like so 

<ion-side-menus >
  <ion-side-menu-content>
    <ion-nav-bar class="bar bar-header bar-balanced">
      <ion-nav-back-button>
      </ion-nav-back-button>

        <ion-nav-buttons side="right" ng-show="isUserLoggedIn">
            <a class="button button-icon button-clear ion-person pull-right" href="#/app/profile">
            </a>
            <a class="button button-icon button-clear ion-log-out"">
            </a>
        </ion-nav-buttons>

      <ion-nav-buttons side="left">
        <a class="button button-icon button-clear ion-navicon" href="#/app/dashboard">
        </a>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

    <!--
  <ion-side-menu side="left">
        <ion-header-bar class="dark-bg expanded">
            <span class="avatar hero" style="background: url('img/iLearn-logo.png'); background-size: cover;"></span>
            <h2>iLearn</h2>
        </ion-header-bar>
    <ion-content class="stable-bg has-expanded-header">
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/login">
          Login 1
        </ion-item>
        <ion-item menu-close href="#/app/dashboard">
          Dashboard
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/profile">
          Profile
        </ion-item>
        <ion-item menu-close href="#/app/courses">
          Courses
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
  -->
</ion-side-menus>

Upvotes: 0

Views: 738

Answers (2)

abdullah
abdullah

Reputation: 181

I use below code to detect white screen errors on phones and emulator. (Works fine on android studio emulator and only checked on Ionic1 please let me know if works on other versions). Copy code and paste it in your index.html as placed below. After that run "ionic cordova run android " errors will be alerted.

Write this code in index.html "Just Below code" 

<script type="text/javascript">
    window.onerror = function(err, fn, ln) {
        alert("ERROR:" + err + ", " + fn + ":" + ln);
    };
    var errorVar = objectDoesntExists.properyDoesntExist;
</script>  `

Upvotes: 0

Julian Be
Julian Be

Reputation: 128

Use Genymotion to install your app on your pc, then check the console for errors, you can find many tutorials on youtube to install genymotion

Upvotes: 0

Related Questions