Search code examples
angularplunker

No component factory found for undefined. but did add to @NgModule.entryComponents


I am getting the following error in Console of Plunker:

No component factory found for undefined. Did you add it to @NgModule.entryComponents?

But I did add the component (SecondComp) to entryComponents in @NgModule. Please take a look at this plnkr and let me know, why am I getting this error?

https://plnkr.co/edit/BM3NMR?p=preview

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FirstComp} from './first.component'
import {SecondComp} from './second.component'
import {InjService} from './inj.service'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <first-comp></first-comp>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule ],
  providers: [ InjService ],
  declarations: [ App, FirstComp, SecondComp ],
  bootstrap: [ App ],
  entryComponents: [ SecondComp ],
})

export class AppModule {}

Thank you!


Solution

  • There's a simple spelling problem in your inj.service.ts. You spelt SecondComp as SecondComponent. Changing SecondComponent to SecondComp fixed the issue, as well as uncommenting the lines in your addDynamicComponent method.

    inj.service.ts:

    Before

    import {SecondComponent} from './second.component' // <- Over here
    
    // ...
    
    addDynamicComponent() {
      const factory = this.factoryResolver.resolveComponentFactory(SecondComp)
    //  const component = factory.create(this.rootViewContainer.parentInjector)
    //  this.rootViewContainer.insert(component.hostView)
    }
    

    After

    import {SecondComp} from './second.component' // <- Over here
    
    // ...
    
    addDynamicComponent() {
      const factory = this.factoryResolver.resolveComponentFactory(SecondComp)
      const component = factory.create(this.rootViewContainer.parentInjector)
      this.rootViewContainer.insert(component.hostView)
    }
    

    Updated Plnkr