oidc-client庫引起的Angular無限變化檢測循環

Question

我復制了人們在下面鏈接的 github 上發布的解決方案，如果他們解決了這個問題，請查看庫創建者的進一步評論。

我正在編寫一個 Angular 應用程序，使用版本 12。我打開了 Angular 開發工具，發現我每秒有大約 150 個更改檢測周期，不間斷。

值得一提的是，它是一個 ASP.NET 核心 WebAPI 應用程序，它帶有 ApiAuthorizationModule，它添加了有關登錄、注銷、導航等的邏輯和元素。我無法肯定地證明這一點，但一切都表明這是根本原因。

每個都通過不同的組件，但它們都有共同的來源：

Window.addEventListener:message

誰能解釋這種行為？ 或者至少指出我正確的方向？ 我完全不知道是什么原因導致這個特定事件被添加到 window。

我確實在常規 Chrome 控制台中收到此錯誤消息：

您站點的內容安全策略阻止在 JavaScript 中使用“eval”內容安全策略 (CSP) 可防止將任意字符串評估為 JavaScript，從而使攻擊者更難在您的站點上注入未經授權的代碼。 要解決此問題，請避免使用 eval()、new Function()、setTimeout([string], ...) 和 setInterval([string], ...) 來評估字符串。

也許所有這些都與一些靜默刷新或其他東西有關，我認為它們以某種方式相關？ https://github.com/manfredsteyer/angular-oauth2-oidc/issues/785

[編輯]：現在我已經閱讀了整個 github 線程，是的，這正是問題所在。 關於在原始帖子this.ngZone.runOutsideAngular(() => {...}中放置此命令的任何提示？

Answer 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引起的零星檢測周期，但它是每秒幾個周期 - 比以前好多了！

如果有人也解決了這個問題，請為我們的 rest 發表評論:)