TypeError: this.componentLoader.toArray не является функцией при попытке динамического создания компонентов

Question

Я пытаюсь генерировать компоненты динамически, используя viewcontainerref. Мой шаблон ng в файле masters. html определен следующим образом:

<div class="tab-pane fade show" role="tabpanel" *ngFor="let tab of tabs" [id]="tab.itemName" [ngClass]="{ 'active': activeItem == tab.itemName}">
                <ng-template #appComponentLoader>
                </ng-template>
            </div>

, где определена директива appComponentLoader:

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appComponentLoader]'
})
export class ComponentLoaderDirective {

  constructor(public viewContainerRef:ViewContainerRef) { }

}

Мой masters.component.ts is следующим образом:

import { SecondComponentComponent } from './../second-component/second-component.component';
import { FirstComponentComponent } from './../first-component/first-component.component';
import { ComponentLoaderDirective } from './../../component-loader.directive';
import { Component, OnInit, ComponentFactoryResolver, ViewChild, QueryList, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-masters',
  templateUrl: './masters.component.html',
  styleUrls: ['./masters.component.css']
})
export class MastersComponent implements OnInit {
  masterMenuItems = [
    { itemName: "Countries", displayName: "First Component",Component:FirstComponentComponent },
    { itemName: "ClientLocations", displayName: "Second Component",Component:SecondComponentComponent},
     ];

  @ViewChild('appComponentLoader', {read: ViewContainerRef}) componentLoader;
  activeItem: string;
  tabs=[];


  constructor(public componentFactoryResolver:ComponentFactoryResolver) { }

  ngOnInit(): void {
  }

  menuItemClick(clickMasterMenu:any){
    //console.log(clickMasterMenu)

    this.activeItem=clickMasterMenu.itemName;
    let matchingTabs=this.tabs.filter((tab)=>{
      return tab.itemName == clickMasterMenu.itemName;

    }

    )


    if (matchingTabs.length == 0)
    {
      this.tabs.push({
        tabIndex:this.tabs.length,
        itemName:clickMasterMenu.itemName,
        displayName:clickMasterMenu.displayName

      });

    setTimeout(() => {
      console.log(this.componentLoader)
      var componentLoadersArray = this.componentLoader.toArray();
      var componentFactory = this.componentFactoryResolver.resolveComponentFactory(clickMasterMenu.Component);
      var viewContainterRef = componentLoadersArray[this.tabs.length - 1].viewContainerRef;
      viewContainterRef.createComponent(componentFactory);
    }, 100);
    // setTimeout(()=>{
    //   console.log(this.componentLoader);
    //   //var componentLoaderArray=this.componentLoader.toArray();

    //   var componentFactory=this.componentFactoryResolver.resolveComponentFactory(clickMasterMenu.Component);
    //   var ref=this.componentLoader.createComponent(componentFactory);

    //   // var viewcontainerref=this.componentLoader.viewContainerRef
    //   // viewcontainerref.createComponent(componentFactory);
    // },100);


  }

  }
}

всякий раз, когда я запускаю код, я получаю сообщение об ошибке: core. js: 6185 ОШИБКА TypeError: this.componentLoader.toArray не является функцией в masters.component.ts

Кто-нибудь может помочь, почему?