Angular infinite change detection loop caused by oidc-client library

I have realized after posting the question that the github link below is the exact same problem, but no definite solution is given.

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(() => {...}?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.