注入ComponentFactoryResolver失败，Angular动态组件创建报错求助

我之前也碰到过一模一样的问题，结合你的代码和配置来看，主要是两个地方出了问题，调整后就能解决：

1. 避免使用默认导出组件类 #

Angular的依赖注入系统严重依赖类的装饰器元数据，而export default在webpack+TypeScript的编译场景下，很容易导致元数据和组件类无法正确关联。

修改你的AppComponent导出方式：

// AppComponent.ts
import { Component, ComponentFactoryResolver, OnInit, ViewChild } from "@angular/core"; 

@Component({ 
  selector: "app-component", 
  template: ` <h1>{{title}}</h1> ` 
}) 
// 把export default改成命名导出
export class AppComponent implements OnInit { 
  private title = "Hello World"; 
  constructor(private componentFactoryResolver: ComponentFactoryResolver){ } 
  ngOnInit() {} 
}

然后在模块中同步修改导入语句：

// AppModule.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
// 改为命名导入
import { AppComponent } from './AppComponent'; 

@NgModule({ 
  declarations: [ AppComponent ], 
  imports: [ BrowserModule ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }

2. 开启TypeScript的元数据生成配置 #

Angular需要TypeScript在编译时生成装饰器元数据，才能识别构造函数中需要注入的服务。检查你的tsconfig.json，必须开启以下两个关键配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true, // 必须启用
    "emitDecoratorMetadata": true,   // 必须启用
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

为什么会出现这个错误？ #

本质原因是Angular的DI系统不知道要给AppComponent的构造函数注入什么服务。当emitDecoratorMetadata未启用时，TypeScript不会生成构造函数参数的元数据；再加上你用了默认导出组件类，进一步干扰了元数据与类的绑定，最终导致DI系统抛出Can't resolve all parameters的错误。

额外小提示 #

在Angular 5及以后的版本中，动态创建组件其实不需要手动注入ComponentFactoryResolver了，直接使用ViewContainerRef.createComponent()方法即可——它内部已经封装了工厂解析的逻辑，能让你的代码更简洁。

内容的提问来源于stack exchange，提问作者Ben Cheng