由 oidc-client 库引起的角度无限变化检测循环答案

【问题标题】：Angular infinite change detection loop caused by oidc-client library由 oidc-client 库引起的角度无限变化检测循环
【发布时间】：2021-08-27 19:43:39
【问题描述】：

我复制了人们在下面链接的 github 上发布的解决方案，如果他们解决了这个问题，请查看库创建者的更多 cmets。

我正在编写一个 Angular 应用程序，使用版本 12。我打开了 Angular 开发工具，发现我有大约 150 个更改检测周期每秒，不间断。

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

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

Window.addEventListener:消息

谁能解释这种行为？或者至少指出我正确的方向？我完全不知道是什么原因导致这个特定事件被添加到窗口中。

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

您网站的内容安全政策禁止在 JavaScript` 内容安全策略 (CSP) 阻止评估将任意字符串作为 JavaScript 使其更难攻击者在您的网站上注入未经授权的代码。为了解决这个问题，避免使用 eval()、new Function()、setTimeout([string], ...) 和 setInterval([string], ...) 用于评估字符串。

也许所有这些都与一些静默刷新或其他东西有关，我认为它们以某种方式相关？ https://github.com/manfredsteyer/angular-oauth2-oidc/issues/785

[编辑]： 现在我已经阅读了整个 github 线程，是的，这正是问题所在。关于在原始帖子this.ngZone.runOutsideAngular(() => {...} 中放置此命令的任何提示？

【问题讨论】：

标签： javascript angular asp.net-core-webapi angular2-changedetection asp.net-authorization

【解决方案1】：

解决方案，如我的问题中的 github 链接所示，是禁用消息事件的区域补丁，并希望库的创建者能够解决某个问题的错误。我按照建议创建了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 开发插件与 Redux 开发工具一起使用？那么它可能是 Angular 开发工具中的一个错误，请参阅：Interferences with Redux DevTools extension github.com/rangle/angular-devtools/issues/825
这个变通办法摆脱了少量的更改检测，但 setInterval 仍然在一秒钟内运行大约 8 次更改检测。我认为这是由于 checkSessionInterval。默认值为 2000，但最大值为 5000。