Angular 17 SSR/Hydration问题求助：开放订阅致页面加载超时

问题背景 #

• 刚启动一个Angular 17新项目，遇到服务器端渲染（SSR）和/或Hydration相关问题，暂无法确定具体是哪一个。此前主要使用Angular 14及以下版本，且未使用SSR，从未遇到此类问题。
• 在首页组件中订阅了angular-requests库提供的Subject，由于存在开放的Observable，导致ApplicationRef的isStable未触发，页面需要等待10秒才能加载，之后收到如下警告：

Angular hydration expected the ApplicationRef.isStable() to emit true, but it didn't happen within 10000ms. Angular hydration logic depends on the application becoming stable as a signal to complete hydration process. Find more at https://angular.io/errors/NG0506

现有尝试与诉求 #

• 查阅相关文档后，文档建议使用NgZone在Angular外部订阅这些Observable，但不想在每个发起请求的组件中都这么做，感觉这并非合理方案。
• 目前找到一个临时粗糙修复，但认为肯定存在支持开放订阅的更优方案，恳请提供帮助。

临时粗糙修复代码 #

app.component.ts #

export class AppComponent {
  public canRender: boolean = true;

  constructor() {
    inject(ApplicationRef).isStable
      .subscribe(isStable => this.canRender = isStable || this.canRender);
  }
}

app.component.html #

@if (canRender) {
  <router-outlet></router-outlet>
}

内容的提问来源于stack exchange，提问作者Venfi Oranai