title: Cannot read property 'createComponent' of undefined in ngAfterViewInit
body: <p>I've been trying to create a dynamic component loader example to proof out some ideas, however I've been completely unsuccessful in getting it to work.  I've followed the Angular documentation to a T and even explored solutions here on SO.  Nothing has given me any progress yet and I'm not sure where to go from here.</p>
  
  <p>When running the code, I get the error <code>"Cannot read property 'createComponent' of undefined at ParentComponent.ngAfterViewInit"</code></p>
  
  <p>I'm using Angular 8 if that matters, but as far as I can tell this is sound, yet I can never get my component to display.  Thoughts?</p>
  
  <p>Below is my code:</p>
  
  <p><strong>parent.component.ts</strong></p>
  
  <pre><code>export class ParentComponent implements AfterViewInit {
      @ViewChild('ref', { static: true, read: ViewContainerRef }) ref: ViewContainerRef;
  
      constructor(
          private componentFactoryResolver: ComponentFactoryResolver
      ) { }
  
      ngAfterViewInit(): void {
          const factory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
          this.ref.createComponent(factory);
      }
  }
  </code></pre>
  
  <p><strong>parent.component.html</strong></p>
  
  <pre><code>    &lt;div fxFlex="grow" fxLayout="column" ngClass="scroll"&gt;
          &lt;ng-template ref&gt;&lt;/ng-template&gt;
      &lt;/div&gt;
  </code></pre>