Почему функция async не определяет ViewChild в ngOnInit ()

Вот компонент, у которого есть ViewChild, относящийся к #h1 в html:

import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
  <h1 #h1 *ngIf="showh1">
    Welcome to {{title}}!
  </h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public showh1: boolean = false;
  @ViewChild('h1') h1: ElementRef;
  ngOnInit() {
    setTimeout(() => { //http.get in actual scenario
      this.showh1 = true;
      console.log('h1:' + this.h1);   //h1:undefined
      setTimeout(() => {
        console.log('h2:' + this.h1); //h2:[object Object]
      }, 1);
    }, 1000);
  }
}

Почему this.h1 undefined на console.log('h1:' + this.h1);?

Обновление 2020 г., ноябрь. Вы не оказались бы в такой ситуации, если бы используете последнюю версию Angularv9, которая имеет static вариант на @ViewChild.