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

问题描述

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

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

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

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

Window.addEventListener:message

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

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

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

也许所有这些都与一些无声的刷新有关，我认为它们以某种方式相关？ https://github.com/manfredsteyer/angular-oauth2-oidc/issues/785

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

解决方法

解决方案，如我的问题的 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 引起的零星检测周期，但每秒只有几个周期 - 比以前好多了！

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