在服务器端渲染的 Angular 应用程序中使用 rxjs 间隔时如何解决水合错误？

Question

我有一个 Angular 17 服务器端渲染应用程序，它使用 rxjs 间隔定期调用 API GET 端点。代码是这样的：

interval(5000).pipe(
        startWith('Loading...'),
        switchMap(() => this.apiService.get())

但是，当我运行此命令时，我在浏览器控制台中从 Angular 收到此错误：

NG0506：角水合作用期望 ApplicationRef.isStable() 发出true，但它没有在 10000 毫秒内发生。角度水合逻辑取决于应用程序变得稳定作为完成水合过程的信号。欲了解更多信息，请访问https://angular.io/errors/NG0506

我已经尝试过多种解决方案，例如：

• 将间隔包裹起来isPlatformBrowser()
• afterNextRender()在我的组件的构造函数中
• inject(NgZone).runOutsideAngular()在构造函数中

然而，他们都没有给出我想要的结果（每 5 秒调用一次）以及每次我收到水合错误时。那么，什么是最好的方法，什么时候需要使用哪种方法？

Answer 1

据我所知，角水合过程没有在预期的时间内完成。Angular Hydration 是将服务器渲染的 HTML 转换为客户端功能齐全的 Angular 应用程序的过程。当 ApplicationRef.isStable() 方法在 10 秒内没有发出 true 时，就会发生错误，表明应用程序尚未变得稳定。

也从下面的视图来看

如果存在长时间运行的任务或异步操作导致应用程序变得不稳定，则可能会导致此错误。在这种情况下，间隔运算符可能会导致问题。或者，如果 this.apiService.get() 进行的 API 调用需要很长时间才能完成，则可能会延迟应用程序变得稳定。

或者代码中可能存在无限循环或递归函数调用，这可能会阻止应用程序变得稳定。

我没有真正的解决方案，但预防措施是将时间间隔增加到 20 秒之类的东西

interval(20000).pipe(
        startWith('Loading...'),
        switchMap(() => this.apiService.get()

还值得检查一下性能，因为原因也可能是其他原因。