title: Angular 2.4 No component factory found. Did you add it to @NgModule.entryComponents?
body: <p>I was following one of the guides around to add dynamic components. 
  The only difference I'm seeing with those guides is that I'm launching the dynamic component from a selector (instead of an event like a click event) and also, the angular version (2.4.8 in my case)</p>
  
  <p>Things that I have tried:</p>
  
  <ul>
  <li>Put the entryComponents inside the DynamicSectionComponent. </li>
  <li>Put the entryComponents inside the HomeModule.</li>
  <li>Put the entryComponents inside    the AppModule.</li>
  </ul>
  
  <p>But I haven't figure out what to do, and I'm starting to think that may be related to the angular version I'm using. Any ideas?</p>
  
  <p>Error:</p>
  
  <blockquote>
    <p>caused by: No component factory found for OneColumnSection. Did you
    add it to @NgModule.entryComponents?</p>
  </blockquote>
  
  <p><strong>Selector in home.html</strong></p>
  
  <pre><code> &lt;sr-dynamic-section-component [componentData]="{'component': 'OneColumnSection', 'inputs': {'showNum': 2}}"&gt;&lt;/sr-dynamic-section-component&gt;
  </code></pre>
  
  <p><strong>Dynamic Section Component.ts</strong>
  I have added some console.logs in there, and they are being log except the one after the factory.</p>
  
  <pre><code>import {
    Component,
    Input,
    ViewContainerRef,
    ViewChild,
    ReflectiveInjector,
    ComponentFactoryResolver
  } from "@angular/core";
  import {OneColumnSection} from "./one-column.component";
  
  @Component({
    selector: 'sr-dynamic-section-component',
    entryComponents: [OneColumnSection],
    template: `
      &lt;div #dynamicSectionComponentContainer&gt;&lt;/div&gt;
    `,
  })
  export class DynamicSectionComponent {
  
    currentComponent:any = null;
  
    @ViewChild('dynamicSectionComponentContainer', {read: ViewContainerRef}) dynamicSectionComponentContainer: ViewContainerRef;
  
    // component: Class for the component you want to create
    // inputs: An object with key/value pairs mapped to input name/input value
    @Input() set componentData(data: {component: any, inputs: any }) {
      if (!data) {
        return;
      }
      console.log("Component:" + data.component);
      console.log("Inputs:" + JSON.stringify(data.inputs));
      // Inputs need to be in the following format to be resolved properly
      let inputProviders = Object.keys(data.inputs).map((inputName) =&gt; {
        return {provide: inputName, useValue: data.inputs[inputName]};
      });
      let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
  
      // We create an injector out of the data we want to pass down and this components injector
      let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicSectionComponentContainer.parentInjector);
  
      console.log("about to factory:");
      // We create a factory out of the component we want to create
      let factory = this.resolver.resolveComponentFactory(data.component);
      console.log("factory:" + factory);
  
      // We create the component using the factory and the injector
      let component:any = factory.create(injector);
  
      // We insert the component into the dom container
      this.dynamicSectionComponentContainer.insert(component.hostView);
  
      // We can destroy the old component is we like by calling destroy
      if (this.currentComponent) {
        this.currentComponent.destroy();
      }
  
      this.currentComponent = component;
    }
  
    constructor(private resolver: ComponentFactoryResolver) {
  
    }
  }
  </code></pre>
  
  <p><strong>OneColumnSection.ts</strong></p>
  
  <pre><code>import {Component, Injector} from '@angular/core';
  
  @Component({
    selector: 'sr-one-column-section',
    template: `
      &lt;div&gt;Hello World One Column{{showNum}}&lt;/div&gt;
    `,
  })
  export class OneColumnSection {
    showNum = 0;
  
    constructor(private injector: Injector) {
      this.showNum = this.injector.get('showNum');
    }
  }
  </code></pre>
  
  <p><strong>HomeModule.ts</strong></p>
  
  <pre><code>import {NgModule} from "@angular/core";
  import {HomeComponent} from "./home.component";
  import {HomeRoutingModule} from "./home-routing.module";
  import {DynamicSectionComponent} from "./dynamic-section.component";
  import {OneColumnSection} from "./one-column.component";
  
  @NgModule({
    imports: [HomeRoutingModule],
    declarations: [HomeComponent,DynamicSectionComponent,OneColumnSection],
    entryComponents: [OneColumnSection],
    exports: [HomeComponent],
    providers: []
  })
  export class HomeModule { }
  </code></pre>
  
  <p><strong>Adding list of files inside the home folder.</strong></p>
  
  <ul>
  <li>dynamic-section.component.ts</li>
  <li>home.component.html</li>
  <li>home.component.ts</li>
  <li>home.module.ts</li>
  <li>home-routing.module.ts</li>
  <li>one-column.component.ts</li>
  </ul>