Estou tentando carregar um componente dinamicamente a partir de um componente pai. Ao carregar o componente filho, também preciso passar alguns parâmetros de entrada. Mas estou recebendo o seguinte erro no console do navegador.

Error: Uncaught (in promise): TypeError: Cannot read property 'createComponent' of undefined
    at resolvePromise (zone.js:538)
    at zone.js:574
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (lib/@angular/core/bundles/core.umd.js:9091)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:426)BrowserDomAdapter.logError @ lib/@angular/platform-browser/bundles/platform-browser.umd.js:1900
zone.js:461 Unhandled Promise rejection: Cannot read property 'createComponent' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'createComponent' of undefined(…)consoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'createComponent' of undefined(…)consoleError @ zone.js:463

Meu componente pai

import { Component, ViewChild, ViewContainerRef, ComponentResolver, Injector } from '@angular/core';
import { ExtractorDetails } from './ExtractorDetails';

declare var kendo: any;

@Component({
    selector: 'kendo-grid',
    templateUrl: './HTML/Admin/KendoGrid.html',
    providers: [Configuration, Constants ],
    directives: [Grid, ExtractorDetails]
})
export class ExtractorQueueGrid {
     @ViewChild(ExtractorDetails, { read: ViewContainerRef }) childContainer;

    options: any;
    rowObject: any;

    constructor(private configSetttings: Configuration, private constants: Constants, private _injector: Injector, private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {
        this.setUpGridOptions();
    }

    onChange(event) {
        console.log("click event called");
        console.log("event " + event);
        event.preventDefault();

        this.rowObject = event.target;

        console.log("Queue ID : " + this.rowObject.parentElement.cells[0].innerText);

        this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {
                console.log("Creating component");

                this.childContainer.createComponent(cmpFactory,null, this._injector);
                let cmpRef = this.childContainer.createComponent(cmpFactory);
                cmpRef.instance.ExtractorID = this.rowObject.parentElement.cells[0].innerText; //Input paramter which need to be passed to child component 
            });
    }

}

Meu componente filho

import { Component, Input } from '@angular/core';

@Component({
    selector: 'extractordetails',
    templateUrl: './HTML/Admin/ExtractorDetails.html'  
})
export class ExtractorDetails {
    @Input() ExtractorID : any; 

    constructor()
    {
        console.log("ExtractorDetails component is loaded");
    }
}

Arquivo "./HTML/Admin/KendoGrid.html" abaixo

<div>
    <k-grid [options]="options" (click)="onChange($event)"></k-grid>
</div>
<div>
    <h3>Loader</h3>
    <div id="extractorqueue-details">Extractor Details loaded here</div>
</div>