bug: platform pause and resume subscriptions are outside Angular Zone

[Katur7]

Bug Report

Ionic version:
[x] 4.7.1

Current behavior:
The code executed in response to platform pause and resume subject emitting is not executed in the Angular Zone. This causes Angular not to pick up any changes made.
So if the code updates something that is for example shown on a page it will not be updated until something else causes the change detection to pick it up.

Expected behavior:
That updates is response to the pause and resume events would be detected by Angular as it did in version 3

Steps to reproduce:

• Create new Ionic app
• Subscribe to the pause and resume events and console log NgZone.isInAngularZone()

Related code:
https://github.com/Katur7/ionic-platform-events
The relevant changes in src/app/app.component.ts

Other information:
This affected my app because I was disconnecting a websocket connection to our streamer on the pause event and reconnecting on resume. After reconnecting the changes were not shown until after clicking something in the app.

I fixed it by adding this.ngZone.run around the code

this.platform.resume.subscribe(() => this.ngZone.run(() => {
  // code
}));

I also have a subscription to the onConnect() observable from the @ionic-native/network/ngx plugin that has the same issue.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2 (/home/grimur/.nvm/versions/node/v12.11.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/home/grimur/Android/Sdk/)
   NodeJS            : v12.11.0 (/home/grimur/.nvm/versions/node/v12.11.0/bin/node)
   npm               : 6.11.3
   OS                : Linux 4.15

[davidalvarezr]

Same problem here. I listen the resume event to check the last time I loaded the data to know if I reload it or not.

Thanks a lot,

this.platform.resume.subscribe(() => this.ngZone.run(() => {
  // code
}));

fixed my problem !

[giacomocerquone]

I can confirm this bug, calling manually run fixed my problem too

[andysousa]

Wow, spent hours trying to debug this... glad I came across this. Guess I should have come here first.

[Abrissirba]

So glad I found this! I was going mad trying to figure out why the changedetection stopped working sometimes. The issue was a combineLatest that included this.platform.resume. Putting the subscription inside ngZone.run solved it!

[toxaq]

Find it's best just to use capacitor then you don't have to worry about weird implementation bugs in Ionic where it's just not been fixed for 18 months...

[toxaq]

#18342 Seems they don't consider this to be an ionic problem...

... and oddly was "fixed" here in 2019 #18831 despite still being a problem in 2021...

[epetre]

Find it's best just to use capacitor then you don't have to worry about weird implementation bugs in Ionic where it's just not been fixed for 18 months...

But how would capacitor help here?

[toxaq]

But how would capacitor help here?

Depends on what you consider the problem to be. If it's inconsistent behaviour and general lack of fixes in the Ionic Angular package then by using capacitor directly, you no longer need to be dependent on a bridge between capacitor or cordova via a service in Ionic Angular. Just write your own Platform service that picks up the capacitor evens and wrap your own code in an ngZone.

It's clear that Ionic is in a rush to divorce to itself from Angular and sadly it shows. Capacitor at least framework independent and easily wrapped for consumption.

[danielkleebinder]

I, too, ran into this exact problem several times. Would love to see feedback from the Ionic Team at some point at least, even if it just get's rejected with a credible justification. Most of my projects are setup with NgRx which is reactive and functional by nature and allows me to use a custom RxJS-Operator:

import {NgZone} from '@angular/core';
import {Observable, OperatorFunction} from 'rxjs';

export function runInZone<T>(zone: NgZone = inject(NgZone)): OperatorFunction<T, T> {
  return (source) => {
    return new Observable(observer => {
      const onNext = (value: T) => zone.run(() => observer.next(value));
      const onError = (e: any) => zone.run(() => observer.error(e));
      const onComplete = () => zone.run(() => observer.complete());
      return source.subscribe(onNext, onError, onComplete);
    });
  };
}

As mentioned here before.