Angular 5 - Dynamic Component Loader - Cannot Read Property 'viewcontainerref' Of Undefined

I am trying to make the dynamically load components in Angular 5. I use the Angular Guide for this, but I am stuck now. The thing is; I get the following error: ERROR TypeError: C

Solution 1:

you are using ng-template (<ng-template #modalElement let-c="close" let-d="dismiss">) which will not be rendered until you tell angular to do so. this means the second/nested ng-template which uses the directive is never rendered because the outer ng-template is not rendered.

Have a look at https://stackblitz.com/edit/angular-tjr4uq if you remove the code in ngOnInit you'll see that a) nothing within the outer ng-template is rendered and b) element will be undefined in ngAfterViewInit

EDIT (maybe try that):

import {
  AfterViewInit, ViewContainerRef, Component, ComponentFactoryResolver, Input, OnInit, ViewChild,
    ViewEncapsulation
} from'@angular/core';
import { ChecklistDirective } from"./checklist.directive";
import { ChecklistMainComponent } from"./checklist-main/checklist-main.component";

@Component({
  selector: 'app-checklist',
  templateUrl: './checklist.component.html',
  styleUrls: ['./checklist.component.scss'],
  encapsulation: ViewEncapsulation.None
})
exportclassChecklistComponentimplementsOnInit {

  @ViewChild('modalElement') modalElement;
  @ViewChild(ChecklistDirective) appHost: ChecklistDirective;

  constructor(private vc: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
    this.vc.createEmbeddedView(this.modalElement);
  }

  ngAfterViewInit() {
    this.loadComponent();
  }

  loadComponent() {

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChecklistMainComponent);
    const viewContainerRef = this.appHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);

  }

}

Solution 2:

@ViewChild() decorated properties will only be available after ngAfterViewInit lifecycle hook and you're calling your load component function on ngOnInit, which happens to execute before your @ViewChild() is available.