[ionic 4] View not updating after app suspension/resumption

Ionic Framework
1

I have a component in which i subscribe to an Observable. In the callback i set member variables in that component. Those variables’ values will then be displayed on the component page.

But, when the app goes out of scope and comes back in, the view is not updated anymore (though the callback still receives new values as the console log proves.

To reproduce…

  1. create a new project via ionic start sustest blank
  2. add the geolocation plugin as described in here
  3. add Geolocation to your AppModule's providers
    4… replace the HomePage-class with the following code
export class HomePage implements OnInit {

  lat = 0;
  long = 0;

  private subscription: Subscription;

  constructor(private geolocation: Geolocation,
              private zone: NgZone)
  {
  }
  
  ngOnInit()
  {
    console.log('constructor() Subscribing');
    this.renewSubscription();
  }

  renewSubscription()
  {
    if(this.subscription)
    {
      this.subscription.unsubscribe();
      this.subscription = null;
    }

    this.subscription = this.geolocation
                            .watchPosition({ enableHighAccuracy : true})
                            .subscribe(this.onLocationChange);
  }

  private onLocationChange = (location: Geoposition) =>
  {
    if(location.coords)
    {
      console.log(location.coords.latitude + ':' + location.coords.longitude);
        
        this.lat  = location.coords.latitude;
        this.long = location.coords.longitude;

    }
    else
    {
      console.dir('no coordinates');
      console.dir(location);
    }
  }
  
}
  1. Replace the <ion-content></ion-content> in home.page.html with
<ion-content>

&lt;div class="ion-padding"&gt;

{{ lat }}:{{ long }}

&lt;/div&gt;

&lt;/ion-content&gt;
  1. Run the app on an android phone (that’s what i am doing to reproduce the issue).

When you suspend the app (either manually or through the Android (>=6) Location-Access-Permission-Dialog, then continue running it you can see via the logs that location data keeps coming, but the view is not updated anymore.

After looking around i found, that setting the member variables inside ngZone.run() works:

constructor(..., private zone: NgZone) {...
...
this.zone.run(() => {
        
        this.lat  = location.coords.latitude;
        this.long = location.coords.longitude;
      });

But this seems to be some kind of dirty hack for something that should be working out of the box.
Also: when randomly tapping inside the the app, it will also be updated on each tap (when there is new location data available)

Is this intended behaviour? Is there a more elegant/normal way to keep the view updating after app resuming? Because this feels very like a dirty hack and actually we have a way more complex app and i’m not sure what of all the logic involved has to be put inside those zone guards…

2

Does anybody have any ideas?

3

I want to bump this thread because I am experiencing the same issue. I am using ngrx stores, and on a resume subscription, I need to check to see if I need to refresh some data, and if I do, my views do not update anymore.

Is there a better way of doing this other than the ngzone.run ‘hack’ that you had mentioned.