Error When I try to add dynamically component with angular2 using drag and drop <p>this is my directives to drag and drop</p> <p>I want when I apply my drag and drop to add a component to my div I did the some things after event click but now I how to change it to drag and drop </p> <pre><code>import { Directive, Output, EventEmitter, ElementRef, Input, Renderer, ViewContainerRef, ViewChild, ComponentResolver, ComponentRef } from '@angular/core'; import {Div444} from "../gridmanager/div4-4-4.component"; declare var jQuery:JQueryStatic; @Directive({ selector: '[dnd_drag_grid]', host: { '(dragstart)': 'onDragStart($event)', '(dragend)': 'onDragEnd($event)', '(drag)': 'onDrag($event)', } }) export class dnd_drag_grid { elementDrag:HTMLElement; @Input("drag") drag; set draggable(value:boolean) { this.drag = !!value; } elem:HTMLElement; constructor(private componentRef:ComponentRef, private resolver:ComponentResolver, private el:ElementRef, private renderer:Renderer) { this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'true'); this.renderer.setElementStyle(this.el.nativeElement, 'cursor', 'move'); } onDrag(event:MouseEvent) { console.log(" -----onDrag---- " + this.drag); this.renderer.setElementStyle(this.el.nativeElement, 'border-style', 'dotted'); } onDragEnd(event:Event) { console.log(" -----DragEnd---- " + this.drag); this.renderer.setElementStyle(this.el.nativeElement, 'border', 'none'); } onDragStart(event:DragEvent) { console.log(" ----DragStart----- " + this.drag); this.elementDrag = this.el.nativeElement; } } @Directive({ selector: '[dnd_drop_grid]', host: { '(dragover)': 'onAllowDrop($event)', '(drop)': 'onDrop($event)', '(dragleave)': 'ondragleave($event)', '(dragenter)': 'onDragEnter($event)' } }) export class dnd_drop_grid { elementDrop:HTMLElement; @Input("drop") drop; @Input("target") target; set droppable(value:boolean) { this.drop = !!value; } set setTarget(value:string) { this.target = value; } elem:HTMLElement; @ViewChild('', {read: ViewContainerRef}) component_target; constructor(private componentRef:ComponentRef, private resolver:ComponentResolver, private el:ElementRef, private renderer:Renderer) { console.log("target "+ this.target); } onAllowDrop(event:DragEvent) { this.component_target = this.target; console.log("target "+ this.target); console.log("on allow drop "); event.preventDefault(); this.renderer.setElementStyle(this.el.nativeElement, 'borderStyle', 'dotted'); this.renderer.setElementStyle(this.el.nativeElement, 'borderColor', 'red'); } ondragleave(event:DragEvent) { this.renderer.setElementStyle(this.el.nativeElement, 'borderStyle', 'bridge'); this.renderer.setElementStyle(this.el.nativeElement, 'borderColor', 'white'); console.log("target "+ this.target); } onDragEnter(event:Event) { console.log("target "+ this.target); } onDrop(event:DragEvent) { console.log("target "+ this.target); this.elementDrop = this.el.nativeElement; event.preventDefault(); this.resolver.resolveComponent(Div444).then((factory) =&gt; { this.componentRef = this.component_target.createComponent(factory); }); this.renderer.setElementStyle(this.el.nativeElement, 'borderStyle', 'bridge'); this.renderer.setElementStyle(this.el.nativeElement, 'borderColor', 'white'); console.log("is dropped !"); } } </code></pre> <p>and I add this in my template .html </p> <pre><code>&lt;li dnd_drag_grid drag="true"&gt;Div 4-4-4&lt;/li&gt; &lt;div dnd_drop_grid target="val" drop="true" class="page" id="content" size="A4" layout="portrait" &gt; &lt;div #val hidden&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>this is my error</p> <pre><code> Unhandled Promise rejection: _this.component_target.createComponent is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: _this.component_target.createComponent is not a function(…) </code></pre>