Angular prerendering times out with 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();    
    }        
}

Why are you calling the function in constructor and ngOninit. I would recommend to Obseravble.timer(1000) instead of setInterval and unssubscribe that on ngDestroy of the component — Krishnanunni Jeevan
I don't intend to call the function in both the constructor AND ngOnInit. I just want to show the two places I tried it. Both cause the prerender timeout. I edited the question to show that I also tried Observable.timer() approach. — drewob
Try wrapping the interval code in isPlatformBrowser so that it is not pre rendered. I think timeouts in prerendering causes some kind of loop — Krishnanunni Jeevan
Using isPlatformBrowser worked as a good workaround. Thank you for that. — drewob

Krishnanunni Jeevan Krishnanunni Jeevan · Accepted Answer · 2017-12-07T20:24:02

1

votes

Wrap the interval code in isPlatformBrowser condition so that it is not pre-rendered

Angular prerendering times out with setInterval()

1 Answers