Angular 2 unit testing - @ViewChild is undefined : <p>I am writing an Angular 2 unit test. I have a <code>@ViewChild</code> subcomponent that I need to recognize after the component initializes. In this case it's a <code>Timepicker</code> component from the ng2-bootstrap library, though the specifics shouldn't matter. After I <code>detectChanges()</code> the subcomponent instance is still undefined.</p>

<p>Pseudo-code:</p>

<pre><code>@Component({
    template: `
        &lt;form&gt;
            &lt;timepicker
                #timepickerChild
                [(ngModel)]="myDate"&gt;
            &lt;/timepicker&gt;
        &lt;/form&gt;
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
    public myDate = new Date();
}


// Spec
describe('Example Test', () =&gt; {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture&lt;ExampleComponent&gt;;

    beforeEach(() =&gt; {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it('should recognize a timepicker'. async(() =&gt; {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log('timepickerChild', timepickerChild)
    }));
});
</code></pre>

<p>The pseudo-code works as expected until you reach the console log. The <code>timepickerChild</code> is undefined. Why is this happening?</p>
