Repository navigation
Cannot use Observable.interval(x) in startup of Angular2 SPA #435
Description
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?
Activity
[-]Cannot use Angular2 Async pipe in startup[/-][+]Cannot use Observable.interval(x) in startup of Angular2 SPA[/+]MarkPieszak commentedon Nov 16, 2016
@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
isBrowserfrom angular2-universal to only run this code in the browser.That should take care of it! Now the interval gets ignored on the server, but works as intended in the browser.
SteveSandersonMS commentedon Nov 18, 2016
Thanks for the details @MarkPieszak!
Moalpima commentedon May 19, 2017
Had the same problem. Now it works. Many thanks 👍 @MarkPieszak!
mariuslacatus commentedon Aug 16, 2017
I'm gettin "Cannot read property 'getDOM' of undefined" when using this solution...