Issue With Angular Hydration

Question

I recently started a new Angular 17 project and I'm encountering a bit of an issue with server side rendering and/or hydration, not 100% sure which. Up until now I've primarily worked with lower versions (up to 14) and without server side rendering, so I have yet to encounter such an issue.

Within my home page component I subscribe to a Subject as provided by the angular-requests library. This means that I have an open observable, which causes the ApplicationRef's isStable to not fire resulting in the page needing to wait 10 seconds to load (after which I am also given the following warning: 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).

Reading through the link it suggests to subscribe to these observables using NgZone and subscribing outside of Angular, but I wouldn't want to force that within every single component that causes a request to be sent, as well as that feeling like a bad idea. This page did lead me managing to find a pretty hacky fix, but I feel like there must be some better way that allows me to have open subscriptions. Any help would be greatly appreciated.

Hacky Fix:

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>
}

Again, any help would be greatly appreciated, thanks in advance,

Venfi