fix(angular): run platform subscriptions inside zone (#28404)

Issue number: #19539 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When an app uses Capacitor, then the platform subscriptions will run
outside of the Angular Zone.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The platform subscriptions will run inside of the Angular Zone
regardless if it uses Capacitor or not.

Added an extra `zone.run` within the event listener.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `npm install @ionic/[email protected]`

Author: thetaPC

Diff for: packages/angular/common/src/providers/platform.ts

@@ -68,12 +68,12 @@ export class Platform {
         });
       };
 
-      proxyEvent(this.pause, doc, 'pause');
-      proxyEvent(this.resume, doc, 'resume');
-      proxyEvent(this.backButton, doc, 'ionBackButton');
-      proxyEvent(this.resize, this.win, 'resize');
-      proxyEvent(this.keyboardDidShow, this.win, 'ionKeyboardDidShow');
-      proxyEvent(this.keyboardDidHide, this.win, 'ionKeyboardDidHide');
+      proxyEvent(this.pause, doc, 'pause', zone);
+      proxyEvent(this.resume, doc, 'resume', zone);
+      proxyEvent(this.backButton, doc, 'ionBackButton', zone);
+      proxyEvent(this.resize, this.win, 'resize', zone);
+      proxyEvent(this.keyboardDidShow, this.win, 'ionKeyboardDidShow', zone);
+      proxyEvent(this.keyboardDidHide, this.win, 'ionKeyboardDidHide', zone);
 
       let readyResolve: (value: string) => void;
       this._readyPromise = new Promise((res) => {
@@ -262,12 +262,20 @@ const readQueryParam = (url: string, key: string) => {
   return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
 };
 
-const proxyEvent = <T>(emitter: Subject<T>, el: EventTarget, eventName: string) => {
+const proxyEvent = <T>(emitter: Subject<T>, el: EventTarget, eventName: string, zone: NgZone) => {
   if (el) {
     el.addEventListener(eventName, (ev) => {
-      // ?? cordova might emit "null" events
-      const value = ev != null ? (ev as any).detail : undefined;
-      emitter.next(value);
+      /**
+       * `zone.run` is required to make sure that we are running inside the Angular zone
+       * at all times. This is necessary since an app that has Capacitor will
+       * override the `document.addEventListener` with its own implementation.
+       * The override causes the event to no longer be in the Angular zone.
+       */
+      zone.run(() => {
+        // ?? cordova might emit "null" events
+        const value = ev != null ? (ev as any).detail : undefined;
+        emitter.next(value);
+      });
     });
   }
 };