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/angular@7.5.2-dev.11698187124.1b7ea660`
This commit is contained in:
Maria Hutt
2023-10-25 09:55:38 -07:00
committed by GitHub
parent 34257d681e
commit a4b303e133

View File

@ -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) => {
/**
* `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);
});
});
}
};