Search code examples
ngrxngrx-store

NgRx store runtime check NgZone failing on android

We implemented a network check as a side effect with window event online and offline.

online$ = createEffect(() => {
  return fromEvent(window, 'online').pipe(mapTo(NetworkActions.deviceOnline()));
});

This works fine in Desktop Chrome and on iOS Safari but somehow results in a strictActionWithinNgZone runtime check on Android:

    {
      "state": {
        "keyboard": {
          "isKeyboardOpen": false
        },
        "network": {
          "isDeviceOnline": true
        }
      },
      "error": "Error: Action '[Network] Device Online' running outside NgZone. https://ngrx.io/guide/store/configuration/runtime-checks#strictactionwithinngzone"
    },

Does anybody have any idea why this only happens in Android and why it even is a problem to begin with?

Edit: As far as I understand it, fromEvent(window, '...') should always be inside the zone because zone.js does patch all Browser EventTarget.

Also this is on an Ionic + Cordova App but only when built on Android. Only reason I could see for the difference could be in the Webview it is running in but other than that it is just basic RxJS and Angular

Thanks Pascal

Solution

  • It looks like this was a super specific problem with an Ionic + Cordova App and the Cordova Network Plugin https://ionicframework.com/docs/native/network

    This seems to interfere with the Android Platform. Without the Plugins the Error does not occur but the online and offline window events also never fire on Android. So I guess this has nothing to do with NgRx.