Компонент Angular не загружается в браузере из-за подписки Observable

В Angular 17 рендеринг на стороне сервера (SSR) включен по умолчанию. Однако могут возникнуть трудности с завершением процесса рендеринга, если ваш код содержит интервалы, которые постоянно меняются. Следующий код может помочь решить эту проблему:

import { isPlatformBrowser } from '@angular/common';
import { Component, DestroyRef, OnInit, PLATFORM_ID, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, map } from 'rxjs';
import { SubSink } from 'subsink';

@Component({
    selector: 'app-timingscreen',
    standalone: true,
    imports: [],
    providers: [],
    templateUrl: './timingscreen.component.html',
    styleUrl: './timingscreen.component.scss'
})
export class TimingscreenComponent implements OnInit {
    private subs = new SubSink()

    private destroyRef = inject(DestroyRef);
    private platformId = inject(PLATFORM_ID);

    ngOnInit(): void {
        if (isPlatformBrowser(this.platformId)) {
            this.getCurrentSalahOrIqamah();
        }
    }
    getCurrentSalahOrIqamah() {
        this.subs.sink = interval(1_000).pipe(
            takeUntilDestroyed(this.destroyRef),
            map(() => {
                const date = new Date();
                return date.getHours() * 3_600 + date.getMinutes() * 60 + date.getSeconds();
            })
        ).subscribe(
            {
                next: (timeInSeconds: number) => {
                    console.info(timeInSeconds);
                }
            }
        );
    }
}