Question

当我在我的Android浏览器上查看我的应用时，我看到的只是一个白色屏幕。我已经看到了关于死亡白屏的几个问题＆＃34;在Ionic应用程序中，但这似乎都不适用于此。调试起来很困难，因为我不知道在移动浏览器上看到JS错误的任何方式（除了Chrome及其远程调试功能）。我想我的希望是我的引导功能，我的主要应用程序类或我的路由器有明显错误。我使用的是Angular 1.5.0-rc.2和ng-forward。这是我index.html的相关部分：

<!-- no Angular components are loaded in here on stock Android browser -->
<myapp>
    loading . . .
</myapp>

<script src="/path/to/angular.js"></script>
<script src="/path/to/angular-ui-router.js"></script>

bootstrap.js

import 'reflect-metadata';
import { bootstrap } from 'ng-forward';
import { Application } from '../components/app/Application';
import config from './config/app.config';

bootstrap(Application, [
    'ui.router',
    config.name
]);

app.config.js

export default angular.module('app.config', [])
.config(['$locationProvider', '$urlRouterProvider', '$httpProvider', Config]);

function Config($locationProvider, $urlRouterProvider, $animateProvider, $httpProvider)
{
    $locationProvider.html5Mode({ enabled: true, requireBase: false });
    $urlRouterProvider.otherwise('/');
}

Routes.js

import { Home } from '../../components/home/Home';

class Routes
{
    static Config()
    {
        return [
            {
                url: '/',
                name: 'home',
                component: Home,
                template: '<home></home>'
            }
        ]
    }
}
export default Routes.Config()

的application.js

import { Component, StateConfig, Inject } from 'ng-forward';
import Routes from '../../app/config/Routes';

@Component({
    selector: 'myapp',
    template: `
        <h1>My App</h1>
        <ng-outlet></ng-outlet>
    `
})
@StateConfig(Routes)
export class Application
{
    constructor()
    {
        console.log('Application component instantiated');
    }
}

这适用于我尝试过的每个桌面浏览器，也适用于使用Chrome，Safari和Firefox的移动设备。在我的Android浏览器上，永远不会填充<myapp></myapp>和<home></home>组件。

更新

在我看来，这可能反而/也是Babel转换问题。我有4个Angular应用程序，1个在android浏览器上运行，3个没有。有效的那个和三个不同的唯一区别是那三个是es6。所以我认为我也在这里包括我的Babel设置，以防有助于诊断：

的package.json

"dependencies": {
    "babel-core": "^6.4.0",
    "babel-polyfill": "^6.3.14",
    "babel-runtime": "^6.3.19"
},
"devDependencies": {
    "babel-plugin-syntax-async-functions": "^6.3.13",
    "babel-plugin-transform-async-to-generator": "^6.4.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-regenerator": "^6.3.26",
    "babel-plugin-transform-runtime": "^6.4.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babel-preset-stage-3": "^6.3.13",
    "babelify": "^7.2.0"
},
"babel": {
    "presets": [
        "es2015",
        "stage-0",
        "stage-3"
    ],
    "plugins": [
        "transform-runtime",
        "transform-regenerator",
        "syntax-async-functions",
        "transform-async-to-generator",
        "transform-decorators-legacy"
    ]
}

babel.js（咕噜声）

module.exports = function(grunt)
{
    grunt.config.set('babel', {
        options: {
            sourceMap: true,
            presets: ['es2015', 'stage-0', 'stage-3'],
            plugins: ['transform-decorators-legacy']
        },
        client: {
            files: [{
                expand: true,
                cwd: '<%= grunt.path.client %>',
                src: ['{app,components,services}/**/*.js'],
                dest: '<%= grunt.path.tmp %>'
            }]
        }
    });
};

更新

我找到了关于股票浏览器的Android about:debug设置。您将其键入地址栏并按Enter键，然后您在浏览器设置中突然显示Debug设置，其中包含＆＃34;显示JavaScript控制台＆＃34;的复选框。但是，切换不会产生任何影响（即使我知道有JS错误）。 HTC在那里没有帮助。还是很沮丧。

Answer 1

我将已编译的代码包装在try/catch中，并收到错误ReferenceError: Set is not defined，这导致我reflect-metatdata函数尝试创建polyfill。该解决方案似乎只是在我的引导程序文件中导入babel-polyfill：

import 'reflect-metadata';

// Missing this appears to be the cause of the problem
import 'babel-polyfill';

import { bootstrap } from 'ng-forward';
import { Application } from '../components/app/Application';
import config from './config/app.config';

bootstrap(Application, [
    'ui.router',
    config.name
]);

ng-forward bootstrap函数和/或babel transpilation不能在股票android浏览器上运行

1 个答案: