Slow performance in hybrid AngularJS and Angular application in Safari

Question

I have started recently the migration of an AngularJS application to Angular 4 using the upgrade module.

One of my AngularJS directives uses a third party library (ngFlow) to upload files using XMLHttpRequest.send(). When running in hybrid mode, uploads work fine both, in Chrome and in Firefox. However, in Safari the app becomes very slow during an upload and the browser process reaches 100% CPU used.

Using Safari web tools, I see that there is a lot of calls to globalZoneAwareCallback from zone.js.

My impression is that the Angular zone is kicking off change detection for every XMLHttpRequest progress event happening during the upload.

I am aware that I could use runOutsideAngular from NgZone to avoid this, but I don't know how to use it in the case where the async call is happening in a third party AngularJS library or if there is any other solution to address this issue.

Answer 1

Finally I managed to resolve the issue using runOutsideAngular.

First, I downgraded the NgZone module to use it in my AngularJS code:

factory('ngZone', downgradeInjectable(NgZone));

And then I injected the service in the upload directive and use it to run the file uploads out of the Angular zone:

ngZone.runOutsideAngular(() => $flow.upload());

Answer 2

To avoid all issues with $digest and performance I recommend using downgradeModule - it bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate.