Estoy tratando de cargar dinámicamente un componente en la versión final 2.0.0.

Usando RC5 estaba cargando usando el siguiente código:

Cree una directiva para cargar los controles:

import {
  CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';

@Directive({
      selector: '[ctrl-factory]'
    })
    export class ControlFactoryDirective implements OnChanges {
      @Input() model: any;

      constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
      }

      create(cp) {
        this.resolver.resolveComponent(cp)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
            let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
            ch.model = this.model;
        });
      }

      ngOnChanges() {
        if (!this.model) return;

        switch (this.model.type) {
          case 'checkbox':
            this.create(CheckboxComponent);
            break;
          case 'checkboxlist':
            this.create(CheckboxListComponent);
            break;
          case 'datepicker':
            this.create(DatePickerComponent);
            break;
          default:
            break;
        }
      }
    }

Luego cargué esa directiva en mi página así:

<div ctrl-factory *ngFor="let child of page.childrens" [model]="child"></div>

Pero después de actualizar de la versión final de rc5 a 2.0.0, el resolutor ya no existe, fue reemplazado por el compilador.

Encontré muchos lugares que mostraban cómo cargarlo usando diferentes códigos, pero todos eran demasiado complejos y no pude hacerlo funcionar.

Tome esto por ejemplo:¿Cómo puedo usar / crear plantillas dinámicas para compilar componentes dinámicos con Angular 2.0?

Parece más específico para ese escenario, solo necesito cargar el componente y configurar un modelo llamado @Input.

Una cosa cuando estaba intentando tenía que crear dinámicamente un módulo para cada componente, luego agregarle el componente. Pero luego tuve problemas para decir que el componente se estaba configurando en más de un Módulo, intenta eliminarlo en algún lugar y no funciona.

La mayor parte del código que se muestra proviene de este enlace:http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/

E hizo un par de cambios.

Actualizar

Me las arreglo para que funcione, utilizando el siguiente enfoque:

El método de creación se ha cambiado a

private create(cp) {
    @NgModule({
      imports: [BrowserModule, ControlsModule],
      declarations: []
    })
    class DynamicModule {}

    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(({componentFactories}) => {
        const compFactory = componentFactories.find(x => x.componentType === cp);
        const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        const cmpRef = this.vcRef.createComponent(compFactory, 0, injector, []);
        cmpRef.instance.model = this.model;
      });
  }

En la mayoría de los lugares que he encontrado, establezca crear el Componente y configúrelo en DynamicModule, el problema es que cuando ya está declarando ese mismo componente en un módulo diferente, angular se va a quejar. La solución en mi caso fue importar mi ControlMódulo que tiene todos mis controles exportados.