title: How to limit change detection on XHR in hybrid AngularJS and Angular 5 application
body: <p>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).</p>
  
  <p>I have read <a href="https://stackoverflow.com/questions/45447319/slow-performance-in-hybrid-angularjs-and-angular-application-in-safari">here</a> that NgZone can be downgraded and used to limit the calls. </p>
  
  <p>But I wonder is it really needed to check every component on every XHR request?</p>
  
  <p>Is there a way to limit these checks or turn them off completely on XHR requests? (for certain components perhaps?)</p>
  
  <p>Any other patterns to that might help with this issue?</p>
  
  <p>This is an overview that shows the delays caused by the XHR requests.
  <a href="https://i.stack.imgur.com/o42Tz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o42Tz.png" alt="enter image description here"></a></p>
  
  <p>This is a detail zoomed in view:
  <a href="https://i.stack.imgur.com/vboa3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vboa3.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong>
  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:</p>
  
  <p><a href="https://i.stack.imgur.com/wxtne.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wxtne.png" alt="enter image description here"></a></p>
  
  <pre><code>@Component({
      selector: "oc-filter",
      templateUrl: "./header-filter.component.html",
      styleUrls: ["./header-filter.component.scss"],
      encapsulation: ViewEncapsulation.None,
      changeDetection: ChangeDetectionStrategy.OnPush
  }) 
  </code></pre>
  
  <p>So the stack is still very similar:
  <a href="https://i.stack.imgur.com/m0Qp5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m0Qp5.png" alt="enter image description here"></a></p>
  
  <p>Is Angular still going through all components anyway?
  Is there a way to prevent this at an earlier stage?</p>