Estoy tratando de cargar un componente dinámicamente desde un componente principal. Al cargar el componente hijo, también necesito pasar algunos parámetros de entrada. Pero recibo el siguiente error en la consola del 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

Mi componente padre

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 
            });
    }

}

Mi hijo componente

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");
    }
}

Archivo "./HTML/Admin/KendoGrid.html" a continuación

<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>