systemjs - angular 2: trying to load a component dynamically, getting: TypeError: Cannot read property 'parentInjector' -

i trying load component dynamically angular2 , it's erroring out with:

exception: error: uncaught (in promise): typeerror: cannot read property 'parentinjector' of undefined

this code:

@component({     selector: 'notes5',     template: `<span #extensionanchor></span>`  })  export class notes5 extends notesbase {     constructor(private dynamiccomponentloader:dynamiccomponentloader, private notesservice:notesservice,                 protected sliderpanel:sliderpanel,                 protected commbroker:commbroker) {          this.loadcomponentasync("src/comps/app2/notes/notedynamic", "testcomponent", this.extensionanchor);     }      @viewchild('extensionanchor', {read: viewcontainerref}) extensionanchor:viewcontainerref;      public loadcomponentasync(componentpath:string, componentname:string, locationanchor:viewcontainerref) {         system.import(componentpath)             .then(filecontents => {                 console.log(filecontents);                 return filecontents[componentname]             })             .then(component => {                 this.dynamiccomponentloader.loadnexttolocation(component, locationanchor)             });     } } 

any ideas?

regards

sean

your original error caused mismatch between actual class name , name of component trying dynamicall render: i.e., if referencing testcomponent class must named testcomponent.

your current error typeerror: cannot read property 'parentinjector', caused trying load content @viewchild element before view rendered, since calling in constructor. need move call further down lifecycle, such ngafterviewinit.

constructor(private dynamiccomponentloader:dynamiccomponentloader,              private notesservice:notesservice,             protected sliderpanel:sliderpanel,             protected commbroker:commbroker,             private resolver: componentresolver) { }  ngafterviewinit() {     this.loadcomponentasync("src/comps/app2/notes/notedynamic",          "testcomponent", this.extensionanchor); } 

finally, since dynamiccomponentloader deprecated, should using componentresolver instead:

public loadcomponentasync(componentpath:string, componentname:string,                            locationanchor:viewcontainerref) {     system.import(componentpath)         .then(filecontents => {             console.log(filecontents);             return filecontents[componentname]         })         .then(component => {             this.resolver.resolvecomponent(component).then(factory => {                 locationanchor.createcomponent(factory, 0, locationanchor.injector);             });         }); }