ng-forwardブートストラップ機能、または在庫アンドロイドブラウザで動作しないバベル蒸散

Question

私の在庫をAndroidブラウザで見ると、私が見るのは白い画面です。私は、イオンアプリの「死の白いスクリーン」に関するいくつかの問題を見てきましたが、そのどれもここには当てはまりません。モバイルブラウザ（Chromeとリモートデバッグ機能以外）でJSエラーを確認する方法がわからないため、デバッグするのは難しいです。私の希望は、私のブートストラップ機能、私の主なアプリケーションクラス、またはルーターに明らかに間違っていることがあると思います。 Angular 1.5.0-rc.2とng-forwardを使用しています。

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

：ここに私の index.htmlの関連部分です

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'); 
    } 
} 

これは私が試したすべてのデスクトップブラウザ上で、また、クロム、SafariやFirefoxを使用して、モバイル上で動作します。私の在庫Androidブラウザでは、<myapp></myapp>と<home></home>のコンポーネントは決して読み込まれません。

更新

代わりに/また、バベルのtranspilationの問題かもしれないと私に起こります。私は角型アプリが4つあります。ストックアンドロイドブラウザでは1つ、3つではありません。動作するものと動作しないものの唯一の唯一の違いは、これらの3つではありません。だから私は、私が診断に役立つ場合には、あまりにも、ここに私のバベルのセットアップを含めしようと思いました。

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 %>' 
      }] 
     } 
    }); 
}; 

更新

在庫ブラウザのためのroidのabout:debug設定。アドレスバーに入力してEnterキーを押すと、ブラウザ設定でDebugの設定が突然表示されます。その中には、「Show JavaScript Console」のチェックボックスがあります。しかし、それをトグルすることは何の効果ももたらさない（たとえ私がJSエラーがあることを知っていても）。 HTCは助けにはならなかった。まだまだ狂った。

Answer 1

翻訳されたコードをtry/catchにラップし、ReferenceError: Set is not definedというエラーが表示され、ポリフィルを作成しようとしていたreflect-metatdataの機能につながりました。あなたが他のすべてをポリフィルに何かを必要とするので、右、バベルは構文のみをtranspiles

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 
]);