Angular2 RC 5. No component factory found for dynamically loaded components

Let's say TextCellComponent is declared in FooModule and your component responsible for creating dynamic content is in module BarModule.

In such case FooModule needs to be imported into BarModule

@NgModule({
 imports: [FooModule],
declarations: [ComponentDispatcherComponent]
})
export class BarModule {}

To my eyes that kinda compromises the idea of things being dynamic. I simply want a component that will create any component I send it to by class reference. If anyone has a decent solution I'd be glad to hear it.


All components about to be loaded "dynamically" need to be declared in the entryComponents section of your module. In other words you should end up with something like:

@NgModule({
    imports: [BrowserModule, HttpModule, FormsModule, ReactiveFormsModule, ...MATERIAL_MODULES],
    declarations: [...APPLICATION_PIPES, ...APPLICATION_COMPONENTS, ...APPLICATION_DIRECTIVES, CygnusComponent,
        // Component declarations
        // TODO: refactor to appropriate modules
        ...
        ComponentDispatcherComponent,
        TextCellComponent,
        ...
    entryComponents: [TextCellComponent]
    bootstrap: [ApplicationComponent],
    providers: [...APPLICATION_PROVIDERS, AppStore]
})
export class ApplicationComponent{

Please note that you need to list the TextCellComponent in both the declarations and entryComponents section.


You may want to check your import paths. In my case, one file import used uppercase while the other used lowercase.

//file 1
import { IRComponent } from "./components/IR/IR.component";
//file 2
import { IRComponent } from "./components/ir/ir.component";

The give away was in the Chrome network tab, I noticed that the file was being loaded twice (once for each spelling).

Tags:

Angular