Question

我有一个带Angular模板的Visual Studio 2017 .NET Core 2.0项目。当我取消注释＆＃34; this.SetUpRefreshInterval（）＆＃34;时，角度预渲染会超时。以下几行。该应用程序返回错误＆＃34; NodeInvocationException：预渲染在30000ms后超时，因为＆＃39; ClientApp / dist / main-server＆＃39;返回了一个未解决或拒绝的承诺。确保您的启动功能始终解决或拒绝其承诺。＆＃34;有什么想法吗？

这是组件代码：

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();
    }
}

我也尝试过使用Observable.timer并获得相同的结果：

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

作为一种解决方法，我使用了Krishnanunni的建议并进行了此更改，这有效：

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条件中，以便它不会预先渲染

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

1 个答案: