Dynamically loading component after bootstrap

Question

I am using the following:

this.DynamicComponentLoader.loadIntoLocation(NewComponent, this.parent, 'new');

where this.parent is an ElementRef of my main class App.

However, this throws me an error of:

TypeError: Cannot read property 'componentView' of undefined.

I create this.parent like that:

setParent(parent){
    this.parent = parent.nativeElement;
}

and my App class:

export class App{
    constructor(_elementRef:ElementRef){
        Service.setParent(_elementRef);
    }
}

And my NewComponent:

import {Component} from "angular2/core";

@Component({
    selector: 'new',
    templateUrl: 'app/New.html'
})

export class NewComponent{
    constructor(){
        console.log("New Comopnent here")
    }
}

and Service:

export class Service{
    private parent:ElementRef;
    constructor(private DynamicComponentLoader:DynamicComponentLoader){

    }

    setParent(parent){
        this.parent = parent.nativeElement;
    }

    append(){
        this.DynamicComponentLoader.loadIntoLocation(ModalComponent, this.parent, 'modal');
    }
}

Any ideas on where is the problem?

http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 contains a working Plunker example. — Günter Zöchbauer, Apr 08 '16 at 13:02
Your code doesn't show where you use `this.DynamicComponentLoader.loadIntoLocation(NewComponent, t...` This doesn't work in the constructor for example. — Günter Zöchbauer, Apr 08 '16 at 13:03
@GünterZöchbauer, I've updated my question. I use it in function — alegrowski, Apr 08 '16 at 13:05
And I should mentiont, that class `App` is main class, that is bootstraped. — alegrowski, Apr 08 '16 at 13:07
check this. Gunter just replied on that. http://stackoverflow.com/questions/36495706/injecting-elementref-to-injecable-error — micronyks, Apr 08 '16 at 13:08
Where does `this.parent = parent.nativeElement;` come from? It doesn't look like you liked my suggestion from http://stackoverflow.com/questions/36495706/injecting-elementref-to-injecable-error/36495764#36495764 ? I advice against `DynamicComponentLoader` from a service. Use the service only for communication. — Günter Zöchbauer, Apr 08 '16 at 13:08
@GünterZöchbauer, I've tried it, however I ran into issues of passing promise, to resolve on different type of user actions from modal. Indeed, I like idea of passing components in event emitter service, but I didn't managed to figure out how to pass promise back to the original comopnent — alegrowski, Apr 08 '16 at 13:37
Hard to tell what the problem with passing the promise is. Usually you just pass it like any other value. — Günter Zöchbauer, Apr 08 '16 at 13:39

score 1 · Answer 1 · answered Apr 08 '16 at 13:08

loadIntoLocation expects at least these parameter/types:

loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string)

You use the nativeElement of parent, this is not an ElementRef but an HTMLElement.

The solution is, when storing the parent, you should use:

 setParent(parent){
   this.parent = parent;
 }

I can only guess that this is where your problem comes from

Dynamically loading component after bootstrap

1 Answers1