angularjs - 如何调试我的 ionic/angular/phonegap/cordova 应用程序的白屏？

Question

我在 Ionic 上工作项目(AngularJS + Apache Cordova 又名 Phonegap)。

我项目的第一个代码行是 4 个月，昨天，该应用程序不再适用于模拟器和真实设备，但仍然适用于 chrome 窗口。所以我想我的 Angular 代码是正确的，但我不知道问题出在哪里，也不知道如何处理。

一开始我直接在我的www中编码文件夹，然后我使用 devtools 和设备仿真将它测试到 chrome 中，或者使用 Apache Ripple 扩展在 chrome 中进行测试，有时我将它安装到我的真实设备(Nexus S)中。

我最近在我的项目中安装了 grunt 和 bower 以执行常见任务，我决定重新组织我的项目文件夹。

然后现在，我编码成 src文件夹，并且:

在 chrome 中测试之前，我运行 grunt 'dev' tasks 女巫创建一个 www文件夹并包含一个链接到 scr/ 的专用 index.html js、html、css等res文件。

在模拟器或真实设备中测试之前，我运行 grunt 'prod' tasks 女巫创建 www文件夹，包括构建或复制所有需要的文件到应用程序(app.min.css、app.min.js、模板、字体和媒体文件、图标)。

两者都可以在 chrome 中正常工作，但是当我构建(通过 cordova-cli 或 phonegap build )并在模拟器或真实设备上安装应用程序时，我会得到启动画面，然后是永久白屏。

我尝试在 weinre 的帮助下调试它我注意到 js 控制台没有捕获任何抛出的错误。
但是我放置了一些console.log，看来路由已损坏。
angular.module('app').run()被执行，但第一个 Controller AppCtrl 从未被执行。

这是我的模块代码(这篇文章的重要部分):

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

    }])

})();

出现的唯一警报是:

app.run() 运行...

因此，未出现的警报是:

AppCtrl 运行...

MainCtrl 运行...

HomeCtrl 运行...

请记住，在 chrome 中，一切正常!

这个问题真的很莫名其妙，我已经浪费了几个小时来跟踪它，但没有成功。

任何的想法 ？

Answer 1

我解决了我的问题。

事实上，我编写了一个 httpRequestInterceptor 工厂，它检查是否必须对 url 进行签名才能使用我的 Rest API。

最近对我的项目文件夹结构的更改导致该工厂有时返回错误的结果，然后签署一些本地 url 并导致路由错误，然后出现白屏。