离子在 Android 设备和模拟器上显示白屏 - 怀疑路由问题？答案

【问题标题】：ionic shows white screen on Android device and emulator - suspecting routing issue?离子在 Android 设备和模拟器上显示白屏 - 怀疑路由问题？
【发布时间】：2019-05-02 19:36:54
【问题描述】：

该应用程序在浏览器上运行良好，但在我部署到 Android 设备或模拟器时显示空白屏幕。

在 iOS 模拟器上部署会显示银行背景，但在设备上也会显示空白。

我怀疑这是一个路由问题，因为当我将它直接放在 index.html 的主体上时它会显示导航栏

这是 index.html 的 sn-p

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>

menu.html文件是这样的

<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>

【问题讨论】：

标签： android cordova ionic-framework routing ui-sref

【解决方案1】：

使用Genymotion在你的电脑上安装你的应用，然后检查控制台是否有错误，你可以在youtube上找到很多安装genymotion的教程

【讨论】：

【解决方案2】：

我使用下面的代码来检测手机和模拟器上的白屏错误。（在 android studio 模拟器上运行良好，仅在 Ionic1 上检查，请让我知道是否适用于其他版本）。复制代码并将其粘贴到您的 index.html 中，如下所示。之后运行“ionic cordova run android”错误将被警告。

在 index.html 中写下这段代码“就在代码下面”

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

【讨论】：