Angular2 RC 5.找不到动态加载组件的组件工厂

标题: 解决Angular 2 RC 5中动态加载组件工厂丢失的问题

bash
npm install @angular/core@latest

typescript
import { Component, NgModule, Compiler, Injector, ReflectiveInjector, ViewContainerRef } from '@angular/core';
@Component({
  selector: 'dynamic-component',
  template: '',
})
export class DynamicComponent {
  // Your dynamic component logic here
}
@NgModule({
  declarations: [DynamicComponent],
  entryComponents: [DynamicComponent],
})
export class DynamicComponentModule {}
export function createComponentFactory(compiler: Compiler, metadata: any): Promise {
  const cmpClass = class DynamicComponent {};
  const decoratedCmp = Component(metadata)(cmpClass);
  @NgModule({ imports: [DynamicComponentModule], declarations: [decoratedCmp] })
  class DynamicHtmlModule {}
  return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
    .then((moduleWithFactories) => {
      const moduleFactory = moduleWithFactories.ngModuleFactory;
      const moduleRef = moduleFactory.create(compiler.injector);
      const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(metadata.component);
      return componentFactory;
    });
}

typescript
import { ComponentFactoryResolver, Injector, ViewContainerRef } from '@angular/core';
// ...
constructor(private resolver: ComponentFactoryResolver, private injector: Injector) {}
loadComponent() {
  // 使用ComponentFactoryResolver获取组件工厂
  const factory = this.resolver.resolveComponentFactory(DynamicComponent);
  // 创建组件实例
  const componentRef = factory.create(this.injector);
  // 插入到视图容器
  this.viewContainerRef.insert(componentRef.hostView);
}