How to call HttpClient outside Angular Zone?

Question

In my app, I need to call a slow API endpoint on page loading. This call doesn't really affect the app but should be performed right on page load.

During the whole time the request is performed, there's a macro-task in the queue which prevents Angular Zone from becoming stable and non-testable (in e2e-tests).

This is the only thing I need to be ignored by Zone, all other ones should be waited as usual and many tests already depend on it. So turning waitForAngularEnabled off in the tests is not the best option.

I tried to perform this long-lasting call outside Angular Zone like this:

this.ngZone.runOutsideAngular(() => this.httpClient.post(...))

The XMLHttpRequest task is still in the queue and blocks Zone stability:

Please advise what's the way to run Http requests outside Angular Zone?

score 2 · Answer 1 · answered Dec 15 '20 at 09:44

Here is the configuration that I am using to completely ignore XHR from zone:

(window as any).__zone_symbol__UNPATCHED_EVENTS = [
  // mouse and pointer events - the presence of these here can break angular material tooltips
  'mouseover', 'mousemove', 'mouseout', 'scroll', 'mousewheel', 'pointerover',
  // XHR related events
  'load', 'mouseleave', 'readystatechange', 'loadend', 'loadstart', 'progress'];

(window as any).__Zone_disable_requestAnimationFrame = true;
(window as any).__Zone_enable_cross_context_check = true;
(window as any).__Zone_disable_IE_check = true;
(window as any).__Zone_disable_XHR = true;


// The creator of Zone also suggest ignoring properties directly on XHR
// https://github.com/angular/zone.js/issues/1146
(window as any).__Zone_ignore_on_properties = [
  {
    target: XMLHttpRequest.prototype,
    ignoreProperties: ['load', 'readystatechange', 'loadstart', 'loadend', 'progress']
  }
];

Also make sure that this is not directly inside polyfills.ts but rather in a file that is included (Black the zonejs "listening" event list in polyfills.ts in Angular 8 not working)

I have based this on the discussion inside this issue: https://github.com/angular/zone.js/issues/1146

How to call HttpClient outside Angular Zone?

1 Answers1