2

I have a rather large hybrid AngularJS / Angular application that I upgraded from Angular 4 to Angular 5 to get rid of the UpgradeModule that caused excessive $digests and slowness. But now I noticed that on every AngularJS XHR request Angular 5 does change detection on every downgraded Angular 5 component. Since I have rather large tables with components in, the amount of change detection explodes and causing severe lag (like 20s instead of 0).

I have read here that NgZone can be downgraded and used to limit the calls.

But I wonder is it really needed to check every component on every XHR request?

Is there a way to limit these checks or turn them off completely on XHR requests? (for certain components perhaps?)

Any other patterns to that might help with this issue?

This is an overview that shows the delays caused by the XHR requests. enter image description here

This is a detail zoomed in view: enter image description here

EDIT It did help to set OnPush as changeDetection on all components, which seems logical anyway. But it still seems that each click event and XHR request (I will change to fetch here to try and avoid it) causes $digest and also causes the same call stack anyway (though less work). An example is a the component below:

enter image description here

@Component({
    selector: "oc-filter",
    templateUrl: "./header-filter.component.html",
    styleUrls: ["./header-filter.component.scss"],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})

So the stack is still very similar: enter image description here

Is Angular still going through all components anyway? Is there a way to prevent this at an earlier stage?

JGoodgive
  • 1,068
  • 10
  • 20
  • Are they raw XHR requests or $http requests? – Estus Flask Feb 06 '18 at 14:50
  • They are all $http.post – JGoodgive Feb 06 '18 at 14:52
  • 1
    $http causes a digest cycle on root scope. So do $q promises and other A1 async services. I'm not sure what would be the right way to handle this in your case. You can switch to fetch or axios and native promises in places where you don't want to trigger a digest. Or try to enable OnPush strategy on downgraded components. – Estus Flask Feb 06 '18 at 14:59
  • Canging to OnPush where applicable did remove alot but there are way too much change detection (even thought the detection never leads to anything now).. Thanks. More smart ideas? – JGoodgive Feb 06 '18 at 17:50
  • 1
    The first option with replacing $http is the way to go, I guess. You can use mentioned fetch or axios. Or to go with some other tricks, e.g. another instance of $http that doesn't depend on digests, or an instance of HttpClient if you're willing to make a first step to upgrading A1 code. It would be good to see http://stackoverflow.com/help/mcve to get some idea where are those numerous requests come from. They could possibly benefit from Promise.all if they are done in batch. – Estus Flask Feb 06 '18 at 18:18
  • @estus I have tried adding OnPush and things are absolutely rendering faster but there are still a too much happening. It seem it still goes through all the controls but just do not do anything and end at the callViewAction() method. I add another image. Is there any way prevent this check? – JGoodgive Feb 07 '18 at 19:58
  • I'm not sure if there is something that can be done here. I have limited knowledge of how upgrade works internally. Does the thing you're showing just happens on every digest? I guess the next step is to avoid other native AngularJS stuff ($q, $timeout, ng-* event handlers) because it causes root scope digests and switch to $scope.$digest() where possible. – Estus Flask Feb 07 '18 at 20:36

0 Answers0