使用setInterval（）进行角度预渲染超时

Question

I have a Visual Studio 2017 .NET Core 2.0 project with Angular template. Angular prerendering times out when I uncomment either of the "this.SetUpRefreshInterval()" lines below. The app returns error "NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject. Make sure that your boot function always resolves or rejects its promise." Any ideas?

Here's the component code:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-currentdatetime',
templateUrl: './currentdatetime.component.html',
styleUrls: ['./currentdatetime.component.css']
})
export class CurrentDateTimeComponent implements OnInit {
    private currentDateTime: Date;

    constructor() {
        this.refreshDate();
        //this.setUpRefreshInterval();
    }

    get currentDateFormatted(): String {
        return this.currentDateTime.toLocaleDateString();
    };

    get currentTimeFormatted(): String {
        return this.currentDateTime.toLocaleTimeString(); 
    };

    ngOnInit(): void {
        //this.setUpRefreshInterval();
    }

    private setUpRefreshInterval(): void {
        setInterval(() => {         
            this.refreshDate();
        }, 1000);
    }

    private refreshDate(): void {
        this.currentDateTime = new Date();
    }
}

I also tried using Observable.timer and got the same result:

    private setUpRefreshInterval(): void {
        let timer = Observable.timer(0, 1000);
        timer.subscribe(t => this.currentDateTime = new Date());
    }

As a workaround, I used Krishnanunni's suggestion and made this change, which works:

import { Component, OnInit, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.refreshDate();
}

ngOnInit(): void {
    // setting up the refresh interval caused a timeout in prerendering, so only set up interval if rendering in browser
    if (isPlatformBrowser(this.platformId)) { 
        this.setUpRefreshInterval();    
    }        
}

Answer 1

将间隔代码包装在isPlatformBrowser条件中，以便不预先渲染