angular - Angular2 RC 5. No component factory found for dynamically loaded components -
i'm trying update dynamic component loader rc4 rc5 since componentresolver deprecated. i've updated loader following
@component({ selector: 'component-dispatcher', template: `<div #container></div>` // define template here because of brevity }) export class componentdispatchercomponent implements oninit, ondestroy { @input() component:any; // dynamic component render @input() options:any; // component configuration, optional @input() data:any; // data render within component // inject dynamic component onto dom @viewchild("container", {read: viewcontainerref}) container:viewcontainerref; private componentreference:componentref<any>; constructor(private resolver:componentfactoryresolver) { } ngoninit() { // create our component we're initialised let componentfactory = this.resolver.resolvecomponentfactory(this.component); this.componentreference = this.container.createcomponent(componentfactory); this.componentreference.instance.data = this.data; this.componentreference.instance.options = this.options; } ngondestroy() { // if have component, make sure destroy when lose our owner if (this.componentreference) { this.componentreference.destroy(); } } }
and attempt dynamically load following component dom
@component({ selector: 'text-cell', pipes: [iterableobjectpipe], templateurl: './text-cell.component.html', styles: ['.fieldname { font-weight: bold; }'] }) export class textcellcomponent implements oninit { // data render within component @input() data: any; @input() record: any; // configuration of data display @input() options: { excludefieldnames: boolean, translation: string }; constructor() { } ngoninit() { settimeout(() => { //console.log('***************************** ngoninit...textcell ***********************'); this.options.translation = '' + (_.get(this.options, 'translation') || 'fields'); }); } }
yet when textcellcomponent or other component within app following error
original exception: no component factory found textcellcomponent original stacktrace: error: no component factory found textcellcomponent @ nocomponentfactoryerror.baseexception [as constructor] (webpack:///./~/@angular/core/src/facade/exceptions.js?:27:23) @ new nocomponentfactoryerror
i've completed steps in
https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
but seem missing something. i've tried adding components bootstrapping , defining them globally no luck. suggestions helpful.
edit
adding module definition
@ngmodule({ imports: [ browsermodule, httpmodule, formsmodule, reactiveformsmodule, ...material_modules ], declarations: [ ...application_pipes, ...application_components, ...application_directives, cygnuscomponent, // component declarations // todo: refactor appropriate modules ... componentdispatchercomponent, textcellcomponent, ... ], bootstrap: [ applicationcomponent ], providers: [ ...application_providers, appstore ] }) export class applicationcomponent {}
all components loaded "dynamically" need declared in entrycomponents
section of module. in other words should end like:
@ngmodule({ imports: [browsermodule, httpmodule, formsmodule, reactiveformsmodule, ...material_modules], declarations: [...application_pipes, ...application_components, ...application_directives, cygnuscomponent, // component declarations // todo: refactor appropriate modules ... componentdispatchercomponent, textcellcomponent, ... entrycomponents: [textcellcomponent] bootstrap: [applicationcomponent], providers: [...application_providers, appstore] }) export class applicationcomponent{
please note need list textcellcomponent
in both declarations
and entrycomponents
section.
Comments
Post a Comment