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

Question

I\'m trying to update my dynamic component loader from RC4 to RC5 since the ComponentResolver is deprecated. I\'ve updated the loader to the following

@Compo         


        

Answer 1

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).

Answer 2

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.

Answer 3

You need to import MatDialogModule in Module in order for it to know about the entryComponents there.

Answer 4

There are sometimes when you will face this issue even if you have given the Component in your EntryComponents as well as Declarations.

In those situations, you just have to enter this component name (here TextCellComponent) above all other components as below:

declarations: [ 
        TextCellComponent // Declared above
        CygnusComponent,
        ComponentDispatcherComponent,
        ...
    ]

This should also be done in the entryComponents.

Hope that helps.

Answer 5

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.