fix(platform): run zone after cordova deviceready

Closes #6087

Author: adamdbradley

ionic/config/bootstrap.ts

@@ -1,4 +1,4 @@
-import {provide, Provider} from 'angular2/core';
+import {provide, Provider, ComponentRef, NgZone} from 'angular2/core';
 import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
 import {HTTP_PROVIDERS} from 'angular2/http';
 
@@ -44,9 +44,6 @@ export function ionicProviders(args: any = {}) {
   setupDom(window, document, config, platform, clickBlock, featureDetect);
   bindEvents(window, document, platform, events);
 
-  // prepare the ready promise to fire....when ready
-  platform.prepareReady();
-
   return [
     IonicApp,
     provide(ClickBlock, {useValue: clickBlock}),
@@ -67,6 +64,16 @@ export function ionicProviders(args: any = {}) {
 }
 
 
+export function postBootstrap(appRef: ComponentRef, prodMode: boolean) {
+  appRef.injector.get(TapClick);
+  let app: IonicApp = appRef.injector.get(IonicApp);
+  let platform = appRef.injector.get(Platform);
+  let zone = appRef.injector.get(NgZone);
+  platform.prepareReady(zone);
+  app.setProd(prodMode);
+}
+
+
 function setupDom(window, document, config, platform, clickBlock, featureDetect) {
   let bodyEle = document.body;
   let mode = config.get('mode');

ionic/decorators/app.ts

@@ -1,8 +1,6 @@
 import {Component, ChangeDetectionStrategy, ViewEncapsulation, enableProdMode, Type} from 'angular2/core';
 import {bootstrap} from 'angular2/platform/browser';
-import {IonicApp} from '../components/app/app';
-import {TapClick} from '../components/tap-click/tap-click';
-import {ionicProviders} from '../config/bootstrap';
+import {ionicProviders, postBootstrap} from '../config/bootstrap';
 import {IONIC_DIRECTIVES} from '../config/directives';
 
 const _reflect: any = Reflect;
@@ -41,7 +39,8 @@ export interface AppMetadata {
 * number of arguments that act as global config variables for the app.
 * `@App` is similar to Angular's `@Component` in which it can accept a `template`
 * property that has an inline template, or a `templateUrl` property that points
-* to an external html template.
+* to an external html template. The `@App` decorator runs the Angular bootstrapping
+* process automatically, however you can bootstrap your app separately if you prefer.
 *
 * @usage
 * ```ts
@@ -94,9 +93,7 @@ export function App(args: AppMetadata = {}) {
     }
 
     bootstrap(cls, providers).then(appRef => {
-      appRef.injector.get(TapClick);
-      let app: IonicApp = appRef.injector.get(IonicApp);
-      app.setProd(args.prodMode);
+      postBootstrap(appRef, args.prodMode);
     });
 
     return cls;

ionic/platform/platform.ts

@@ -1,5 +1,6 @@
+import {EventEmitter, NgZone} from 'angular2/core';
+
 import {Config} from '../config/config';
-import {EventEmitter} from 'angular2/core';
 import {getQuerystring} from '../util/util';
 import {ready, windowDimensions, flushDimensionCache} from '../util/dom';
 
@@ -37,6 +38,7 @@ export class Platform {
   private _readyPromise: Promise<any>;
   private _readyResolve: any;
   private _resizeTm: any;
+  private _zone: NgZone;
 
   constructor(platforms = []) {
     this._platforms = platforms;
@@ -186,16 +188,19 @@ export class Platform {
    * @private
    */
   triggerReady() {
-    this._readyResolve();
+    this._zone.run(() => {
+      this._readyResolve();
+    })
   }
 
   /**
    * @private
    */
-  prepareReady() {
+  prepareReady(zone: NgZone) {
     // this is the default prepareReady if it's not replaced by the engine
     // if there was no custom ready method from the engine
     // then use the default DOM ready
+    this._zone = zone;
     ready(this.triggerReady.bind(this));
   }