Angular with custom XHR polyfill not working beacause "outsite of zoneJS"

Question

The problem is about making work one custom XHR polyfill with the zoneJS dectector of angular.

The history:

I'm using Ionic 4, with angular. At this moment i have warning about uiwebview api deprecation, so i try to add the cordova-plugin-wkwebview-engine, but because i use charge some local files (file://) the plugin doesn't like (some part are broken), so i installed cordova-plugin-wkwebview-file-xhr, but with this one i have:

Navigation triggered outside angular zone, did you forget to call ngZone?

I think that the problem is because the cordova-plugin-wkwebview-file-xhr add/modify customs code to de XMLHttpRequest and the zoneJs detection is lost.

So how i can make it work zoneJS with customs XMLHttpRequest? i can re-put the detection?

Some one ask one similar question here: https://github.com/oracle/cordova-plugin-wkwebview-file-xhr/issues/52 but i think this problem is more about angular zoneJS working with the custom code

Answer 1

Normally you have 2 options in situations like this:

1. trigger change detection after a response is received from your "custom" XHR:

https://angular.io/api/core/ChangeDetectorRef

in your ts:

import { ChangeDetectorRef } from '@angular/core';

...

public data;

constructor(private cdr: ChangeDetectorRef) {
}
...

callToServer() {
    this.httpService.getData().subscribe((data)=>{
        this.data = data;
        this.cdr.detectChanges();
    })
};

2. Or you can run the method forcing it to be inside Angular zone by using zone inside the callback:

https://angular.io/api/core/NgZone

in your ts:

import { NgZone } from '@angular/core';

...

public data;

constructor(private zone: NgZone) {
}
...

callToServer() {
    this.httpService.getData().subscribe((data)=>{
        this.zone.run(() => {
            this.data = data;
        })
    })
};