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