2

I copied the solution people posted on github linked below, check it out for further comments by library creators, if they ever solve this.

I'm writing an Angular app, using version 12. I opened up Angular devtools and found that I have ~150 change detection cycles each second, nonstop.

It's worth mentioning that it is an ASP.NET Core WebAPI app, which comes with ApiAuthorizationModule that adds logic and elements regarding login, logout, navigation etc. I can't prove it definitely, but everything points to it being the root cause.

Cycle 578

Cycle 579

Each passes through different components, but they all have the source in common:

Window.addEventListener:message

Can anyone explain this behavior? Or at least point me in the right direction? I've got absolutely no idea what causes this particular event to be added to window.

I do get this error message in regular Chrome console:

Content Security Policy of your site blocks the use of 'eval' in JavaScript` The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site. To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

Maybe all of this has something to do with some silent refresh or something, I think they're related somehow? https://github.com/manfredsteyer/angular-oauth2-oidc/issues/785

[EDIT]: Now that I've read through this entire github thread, yeah, that's exactly the issue. Any tips on where to put this command from original post this.ngZone.runOutsideAngular(() => {...}?

dzenesiz
  • 1,388
  • 4
  • 27
  • 58

1 Answers1

1

The solution, as seen on the github link form my question, is to disable zone patches for message event and hope that creators of the library will solve the bug at some pont. I followed the advice and created zone-patches.ts like this:

(window as any).__Zone_ignore_on_properties = [
  {
    target: window,
    ignoreProperties: ['message'],
  },
];

(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['message'];

export { };

And imported it in pollyfills.ts like so:

import './zone-patches';
import 'zone.js/dist/zone'; // Included with Angular CLI.

Just make sure you respect the order and include your custom import before the zone itself.

This leaves sporadic detection cycles caused by some setInterval somewhere, but it's a few cycles per second so - much better than before!

If someone solves that one as well, please shoot a comment for the rest of us :)

dzenesiz
  • 1,388
  • 4
  • 27
  • 58
  • 1
    Do you use the Angular Development Plugin together with Redux Dev Tools? Then it could be a bug in the Angular Dev Tools see: Interferences with Redux DevTools extension https://github.com/rangle/angular-devtools/issues/825 – kai Steinkellner Jul 07 '21 at 15:55
  • This workaround got rid of few change detections but setInterval still runs about 8 change detections in a second. I think this is due to checkSessionInterval. The default is 2000 but the maximum is 5000. – ConsoleLog Aug 18 '21 at 15:38