Cannot use Observable.interval(x) in startup of Angular2 SPA

[deadwards90]

When using the Angular2 SPA, I stripped down the application so there was nothing but complete bare bones. Just the home and app component, removed the nav bar etc.

I then added the following:

import { Component } from '@angular/core';
import {Observable } from 'rxjs/Rx';

@Component({
    selector: 'home', 
    templateUrl: './home.component.html',
})
export class HomeComponent {
    oJobs = Observable.interval(300);
    constructor() {
    }
}

With the a template:

<h1>Hello, world!</h1>
<ul>
    <span>{{oJobs | async}}</span>
</ul>

Every time I run this, I get the following error:

Exception: Call to Node module failed with error: 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. You can change the timeout value using the 'asp-prerender-timeout' tag helper.

Also it weirdly works OK if you were to comment out the binding on the HTML, run the application, then put it back in. When the refresh happens, the numbers increment on the view so there seems to be nothing wrong from the a code point of view, it's doing what you would expect.

Also works fine just using a non-interval Observer.

Am I doing something stupid here, or is this an actual bug?

[MarkPieszak]

@dantheman999301 So this is a gotcha, I need to make sure to add this onto our list! (See the rest here).

What you need to do in this situation is separate this type of logic depending on the platform you're running in. With Universal, we're watching all async activity, including timeouts & intervals. So what's happening here is that it keeps looping on the server, and your interval never ends (hence the timeout that appears). You want to stay away from timeouts / intervals on the server since it will delay your initial "paint", you want that to be as fast as possible.

TLDR; Use isBrowser from angular2-universal to only run this code in the browser.

import { isBrowser } from 'angular2-universal';

oJobs: Observable<any>;

    constructor () {
        if (isBrowser) {
            this.oJobs = Observable.interval(300);
        }
    }

That should take care of it! Now the interval gets ignored on the server, but works as intended in the browser.

[SteveSandersonMS]

Thanks for the details @MarkPieszak!

[Moalpima]

Had the same problem. Now it works. Many thanks 👍 @MarkPieszak!

[mariuslacatus]

I'm gettin "Cannot read property 'getDOM' of undefined" when using this solution...