Running Angular2 tests that call setTimeout errors with "Cannot use setInterval from within an async zone test"
<p>I'm upgrading our Angular2 app to use rc4 and I started getting an error on my unit tests:</p>

<blockquote>
  <p>Cannot use setInterval from within an async zone test</p>
</blockquote>

<p>My widget makes a request for data from its <code>ngOnInit</code> method and puts up a loading indicator while that request is made. My mocked service returns some data after 1ms.</p>

<p>Here's a simplified version that exposes the problem</p>

<pre><code>import { inject, async, TestComponentBuilder, ComponentFixture} from '@angular/core/testing';
import {Http, Headers, RequestOptions, Response, HTTP_PROVIDERS} from '@angular/http';
import {provide, Component} from '@angular/core';

import {Observable} from "rxjs/Rx";

class MyService {
    constructor(private _http: Http) {}
    getData() {
        return this._http.get('/some/rule').map(resp =&gt; resp.text());
    }
}

@Component({
    template: `&lt;div&gt;
      &lt;div class="loader" *ngIf="_isLoading"&gt;Loading&lt;/div&gt;
      &lt;div class="data" *ngIf="_data"&gt;{{_data}}&lt;/div&gt;
    &lt;/div&gt;`
})
class FakeComponent {
    private _isLoading: boolean = false;
    private _data: string = '';

    constructor(private _service: MyService) {}

    ngOnInit() {
        this._isLoading = true;
        this._service.getData().subscribe(data =&gt; {
            this._isLoading = false;
            this._data = data;
        });
    }
}

describe('FakeComponent', () =&gt; {
    var service = new MyService(null);
    var _fixture:ComponentFixture&lt;FakeComponent&gt;;

    beforeEach(async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) =&gt; {
        return tcb
            .overrideProviders(FakeComponent, [
                HTTP_PROVIDERS,
                provide(MyService, {useValue: service}),
            ])
            .createAsync(FakeComponent)
            .then((fixture:ComponentFixture&lt;FakeComponent&gt;) =&gt; {
                _fixture = fixture;
            });
    })));

    it('Shows loading while fetching data', (cb) =&gt; {
        // Make the call to getData take one ms so we can verify its state while the request is pending
        // Error occurs here, when the widget is initialized and sends out an XHR
        spyOn(service, 'getData').and.returnValue(Observable.of('value').delay(1));
        _fixture.detectChanges();
        expect(_fixture.nativeElement.querySelector('.loader')).toBeTruthy();
        // Wait a few ms, should not be loading
        // This doesn't seem to be the problem
        setTimeout(() =&gt; {
            _fixture.detectChanges();
            expect(_fixture.nativeElement.querySelector('.loader')).toBeFalsy();
            cb();
        }, 10);
    });
});
</code></pre>

<p>This was working fine in Angular2 rc1 and it throws an error in rc4, any suggestions?</p>

<p>Also, there are no errors if you use a <code>setTimeout</code> directly from the test itself</p>

<pre><code>        fit('lets you run timeouts', async(() =&gt; {
            setTimeout(() =&gt; {
                expect(1).toBe(1);
            }, 10);
        }));
</code></pre>