When I view my app on my stock Android browser all I see is a white screen. I've seen a few issues about the "white screen of death" in Ionic apps, but none of that seems to apply here. It's difficult to debug, since I don't know of any way to see JS errors on a mobile browser (other than Chrome and its remote debugging feature). I guess my hope is that there's something obviously wrong with my bootstrap function, my main application class or my router. I'm using Angular 1.5.0-rc.2 and ng-forward. Here's the relevant part of my 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'); } } This works on every desktop browser I've tried, and also on mobile using Chrome, Safari and Firefox. On my stock Android browser, the <myapp></myapp> and <home></home> components are never populated.
update
It occurs to me that this might instead/also be a Babel transpilation issue. I've got 4 Angular apps, 1 works on stock android browser, 3 don't. The only unique difference between the one that works and the three that don't is those three are es6. So I thought I'd include my Babel setup here, too, in case that helps with diagnosis:
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 (grunt)
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
I found about about Android's about:debug setting for the stock browser. You type that into the address bar and hit enter, and then you suddenly have a Debug setting in the browser settings, among which is a checkbox for "Show JavaScript Console". However, toggling that produces no effect whatsoever (even when I know there are JS errors). HTC was no help there. Still flummoxed.
1 Answers
Answers 1
I wrapped the transpiled code in a try/catch and got the error, ReferenceError: Set is not defined, which led me to the reflect-metatdata function, which was trying to create a polyfill. The solution appears to be simply importing babel-polyfill in my bootstrap file:
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 ]); 
0 comments:
Post a Comment