fix(platform): wrap event listeners around zone (#18853)

fixes #18831

angular/src/providers/platform.ts

@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, NgZone } from '@angular/core';
 import { BackButtonEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
 import { Subject, Subscription } from 'rxjs';
 
@@ -42,29 +42,30 @@ export class Platform {
    */
   resize = new Subject<void>();
 
-  constructor(@Inject(DOCUMENT) private doc: any) {
-    this.win = doc.defaultView;
+  constructor(@Inject(DOCUMENT) private doc: any, zone: NgZone) {
+    zone.run(() => {
+      this.win = doc.defaultView;
+      this.backButton.subscribeWithPriority = function(priority, callback) {
+        return this.subscribe(ev => {
+          ev.register(priority, callback);
+        });
+      };
 
-    this.backButton.subscribeWithPriority = function(priority, callback) {
-      return this.subscribe(ev => {
-        ev.register(priority, callback);
-      });
-    };
+      proxyEvent(this.pause, doc, 'pause');
+      proxyEvent(this.resume, doc, 'resume');
+      proxyEvent(this.backButton, doc, 'ionBackButton');
+      proxyEvent(this.resize, this.win, 'resize');
 
-    proxyEvent(this.pause, doc, 'pause');
-    proxyEvent(this.resume, doc, 'resume');
-    proxyEvent(this.backButton, doc, 'ionBackButton');
-    proxyEvent(this.resize, this.win, 'resize');
-
-    let readyResolve: (value: string) => void;
-    this._readyPromise = new Promise(res => { readyResolve = res; });
-    if (this.win && this.win['cordova']) {
-      doc.addEventListener('deviceready', () => {
-        readyResolve('cordova');
-      }, { once: true });
-    } else {
-      readyResolve!('dom');
-    }
+      let readyResolve: (value: string) => void;
+      this._readyPromise = new Promise(res => { readyResolve = res; });
+      if (this.win && this.win['cordova']) {
+        doc.addEventListener('deviceready', () => {
+          readyResolve('cordova');
+        }, { once: true });
+      } else {
+        readyResolve!('dom');
+      }
+    });
   }
 
   /**

angular/test/test-app/e2e/src/providers.e2e-spec.ts

@@ -12,6 +12,9 @@ describe('providers', () => {
 
     expect(await element(by.css('#is-loaded')).getText()).toEqual('true');
     expect(await element(by.css('#is-ready')).getText()).toEqual('true');
+    expect(await element(by.css('#is-paused')).getText()).toEqual('true');
+    expect(await element(by.css('#is-resumed')).getText()).toEqual('true');
+    expect(await element(by.css('#is-resized')).getText()).toEqual('true');
     expect(await element(by.css('#is-testing')).getText()).toEqual('false');
     expect(await element(by.css('#is-desktop')).getText()).toEqual('true');
     expect(await element(by.css('#is-mobile')).getText()).toEqual('false');

angular/test/test-app/src/app/providers/providers.component.html

@@ -12,6 +12,15 @@
     <p>
       isReady: <span id="is-ready">{{isReady}}</span>
     </p>
+    <p>
+      isResumed: <span id="is-resumed">{{isResumed}}</span>
+    </p>
+    <p>
+      isPaused: <span id="is-paused">{{isPaused}}</span>
+    </p>
+    <p>
+      isResized: <span id="is-resized">{{isResized}}</span>
+    </p>
     <p>
       isTesting: <span id="is-testing">{{isTesting}}</span>
     </p>

angular/test/test-app/src/app/providers/providers.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 import {
   Platform, ModalController, AlertController, ActionSheetController,
   PopoverController, ToastController, Events, PickerController, MenuController,
@@ -14,6 +14,9 @@ export class ProvidersComponent {
   isLoaded = false;
   isReady = false;
   isEvent = false;
+  isResumed = false;
+  isPaused = false;
+  isResized = false;
   isTesting: boolean = undefined;
   isDesktop: boolean = undefined;
   isMobile: boolean = undefined;
@@ -32,7 +35,8 @@ export class ProvidersComponent {
     toastCtrl: ToastController,
     navCtrl: NavController,
     domCtrl: DomController,
-    config: Config
+    config: Config,
+    zone: NgZone
   ) {
     // test all providers load
     if (
@@ -44,15 +48,31 @@ export class ProvidersComponent {
 
     // test platform ready()
     platform.ready().then(() => {
+      NgZone.assertInAngularZone();
       this.isReady = true;
     });
-
+    platform.resume.subscribe(() => {
+      console.log('platform:resume');
+      NgZone.assertInAngularZone();
+      this.isResumed = true;
+    });
+    platform.pause.subscribe(() => {
+      console.log('platform:pause');
+      NgZone.assertInAngularZone();
+      this.isPaused = true;
+    });
+    platform.resize.subscribe(() => {
+      console.log('platform:resize');
+      NgZone.assertInAngularZone();
+      this.isResized = true;
+    });
     this.isDesktop = platform.is('desktop');
     this.isMobile = platform.is('mobile');
 
     // test events
     events.subscribe('topic', () => {
       this.isEvent = true;
+      NgZone.assertInAngularZone();
     });
     events.publish('topic');
 
@@ -60,5 +80,11 @@ export class ProvidersComponent {
     this.isTesting = config.getBoolean('_testing');
     config.set('keyboardHeight', 12345);
     this.keyboardHeight = config.getNumber('keyboardHeight');
+
+    zone.runOutsideAngular(() => {
+      document.dispatchEvent(new CustomEvent('pause'));
+      document.dispatchEvent(new CustomEvent('resume'));
+      window.dispatchEvent(new CustomEvent('resize'));
+    });
   }
 }