ng-forward bootstrap funktion und/oder babel transpilation funktioniert nicht auf lager android browser

Question

Wenn ich meine app auf meinem lager Android-browser alle sehe ich ist ein weißer bildschirm. Ich habe ein paar Probleme mit dem "weißen Bildschirm des Todes" in ionischen Apps gesehen, aber nichts davon scheint hier zu gelten. Es ist schwierig zu debuggen, da ich keine Möglichkeit kenne, JS-Fehler in einem mobilen Browser (außer Chrome und seiner Remote-Debugging-Funktion) zu sehen. Ich hoffe, dass es etwas mit meiner Bootstrap-Funktion, meiner Hauptanwendungsklasse oder meinem Router zu tun hat. Ich benutze Angular 1.5.0-rc.2 und ng-forward. Hier ist der relevante Teil meiner 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'); 
    } 
} 

Dies funktioniert auf jedem Desktop-Browser Ich habe versucht, und auch auf mobilen mit Chrome, Safari und Firefox. Auf meinem Android-Browser sind die <myapp></myapp> und <home></home> Komponenten nie bestückt.

Update

Es fällt mir ein, dass dies stattdessen könnte/auch ein Babel transpilation Problem sein. Ich habe 4 Angular Apps, 1 funktioniert auf dem Android-Browser, 3 nicht. Der einzige eindeutige Unterschied zwischen dem, der funktioniert, und den drei, die nicht funktionieren, sind es6. Also dachte ich, ich würde meine Babel Setup hier auch schließen, falls die mit der Diagnose hilft:

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 (Grunzen)

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

Update

Ich fand über etwa Und Roids about:debug Einstellung für den Aktien-Browser. Du tippst das in die Adressleiste und drückst Enter, und dann hast du plötzlich eine Debug Einstellung in den Browsereinstellungen, unter denen ein Kontrollkästchen für "JavaScript Console anzeigen" ist. Das Umschalten hat jedoch keinerlei Auswirkung (selbst wenn ich weiß, dass JS-Fehler vorliegen). HTC war da keine Hilfe. Immer noch verwirrt.

Answer 1

Ich wickelte den transpiled Code in eine try/catch und bekam den Fehler, ReferenceError: Set is not defined, der mich zu der reflect-metatdata Funktion führte, die versuchte, eine Polyfill zu erstellen. Die Lösung scheint einfach babel-polyfill in meiner Bootstrap-Datei importiert werden:

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