Angular 由 oidc-client 库引起的无限变化检测循环

Question

我复制了人们 post 在 github 上编辑的解决方案，链接如下，查看库创建者的进一步评论，如果他们解决了这个问题。

我正在编写一个 Angular 应用程序，使用版本 12。我打开 Angular devtools 并发现我有大约 150 个变化检测周期每秒 , 马不停蹄。

值得一提的是，它是一个 ASP.NET 核心 WebAPI 应用程序，它带有 ApiAuthorizationModule，它添加了有关登录、注销、导航等的逻辑和元素。我无法确切地证明这一点，但一切都指向这是根本原因。

每个都经过不同的组件，但它们都有共同的来源：

Window.addEventListener:message

谁能解释一下这种行为？或者至少给我指出正确的方向？我完全不知道是什么原因导致将此特定事件添加到 window.

我确实在常规 Chrome 控制台中收到此错误消息：

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.

也许所有这些都与一些静默刷新有关，我认为它们在某种程度上是相关的？ https://github.com/manfredsteyer/angular-oauth2-oidc/issues/785

[编辑]: 现在我已经通读了整个 github 话题，是的，这正是问题所在。关于将此命令从原始 post this.ngZone.runOutsideAngular(() => {...}?

放在哪里的任何提示

Answer 1

如我的问题 github link 所示，解决方案是禁用消息事件的区域补丁，并希望库的创建者在某个时候解决该错误。我听从了建议并像这样创建了 zone-patches.ts：

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

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

export { };

并在 pollyfills.ts 中导入它，如下所示：

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

只要确保您尊重订单并在区域本身之前包括您的自定义导入。

这会在某处留下一些 setInterval 引起的零星检测周期，但它是每秒几个周期 - 比以前好多了！

如果有人也解决了那个问题，请为我们其他人发表评论:)

Angular 由 oidc-client 库引起的无限变化检测循环

Angular infinite change detection loop caused by oidc-client library

javascript

angular

asp.net-core-webapi

angular2-changedetection

asp.net-authorization