Angular升级后DomService注入ViewContainerRef遇NullInjectorError求助

问题原因 #

ViewContainerRef 是组件级依赖，仅存在于组件注入器中，根注入器无法提供该服务。你之前使用 ComponentFactoryResolver 时，是通过组件工厂创建流程间接关联了视图容器，而现在直接在根服务（DomService）的构造函数中注入，自然会触发 NullInjectorError。

保留现有结构的修复方案 #

方案1：改用 Angular 14+ 推荐的 createComponent API（最简洁） #

无需依赖 ViewContainerRef，直接通过宿主元素创建组件并挂载到 DOM，完美适配全局组件（模态框、提示框）场景：

修改 DomService，移除构造函数中的 ViewContainerRef 注入，新增全局组件挂载方法：

@Injectable()
export class DomService {
  private renderer: Renderer2;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private appRef: ApplicationRef,
    private injector: Injector,
    private rendererFactory: RendererFactory2,
  ) {
    this.renderer = this.rendererFactory.createRenderer(null, null);
  }

  // 全局组件挂载到body
  appendGlobalComponent<T>(componentType: Type<T>): T {
    // 创建宿主元素
    const hostElement = this.renderer.createElement('div');
    this.document.body.appendChild(hostElement);

    // 用新API创建组件
    const componentRef = createComponent(componentType, {
      injector: this.injector,
      hostElement
    });

    // 关联到应用视图，避免内存泄漏
    this.appRef.attachView(componentRef.hostView);

    // 组件销毁时清理DOM和视图
    componentRef.onDestroy(() => {
      this.appRef.detachView(componentRef.hostView);
      this.renderer.removeChild(this.document.body, hostElement);
    });

    return componentRef.instance;
  }
}

ModalService 和 TooltipService 直接调用该方法即可，无需额外传参，完全保留原有调用逻辑。

方案2：动态获取全局 ViewContainerRef #

如果仍想保留基于 ViewContainerRef 的逻辑，可以通过创建一个临时宿主组件来获取全局可用的视图容器：

1. 新增一个辅助宿主组件：

@Component({ template: '<ng-template #vcr></ng-template>' })
class HostComponent {
  @ViewChild('vcr', { read: ViewContainerRef }) vcr!: ViewContainerRef;
}

2. 修改 DomService，移除构造函数中的 ViewContainerRef，改为动态获取：

@Injectable()
export class DomService {
  private renderer: Renderer2;
  private globalVcr?: ViewContainerRef;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private appRef: ApplicationRef,
    private injector: Injector,
    private rendererFactory: RendererFactory2,
  ) {
    this.renderer = this.rendererFactory.createRenderer(null, null);
  }

  // 获取全局ViewContainerRef
  private getGlobalVcr(): ViewContainerRef {
    if (this.globalVcr) return this.globalVcr;

    const hostElement = this.renderer.createElement('div');
    this.document.body.appendChild(hostElement);

    // 创建宿主组件并获取其ViewContainerRef
    const hostComponentRef = createComponent(HostComponent, {
      injector: this.injector,
      hostElement
    });
    this.appRef.attachView(hostComponentRef.hostView);

    this.globalVcr = hostComponentRef.instance.vcr;
    return this.globalVcr;
  }

  // 基于ViewContainerRef的组件追加方法
  appendComponent<T>(componentType: Type<T>): T {
    const vcr = this.getGlobalVcr();
    const componentRef = vcr.createComponent(componentType, { injector: this.injector });
    this.appRef.attachView(componentRef.hostView);
    return componentRef.instance;
  }
}

方案3：调整 DomService 的提供范围（适合组件内局部使用） #

如果你的组件并非全局使用，可以将 DomService 的提供范围改为组件级，使其能获取当前组件的 ViewContainerRef：

在使用 DomService 的父组件中添加提供者：

@Component({
  selector: 'app-some-component',
  template: '...',
  providers: [DomService] // 组件级提供，此时DomService可注入当前组件的ViewContainerRef
})
export class SomeComponent {}

但该方案会导致每个组件拥有独立的 DomService 实例，不适合全局模态框/提示框场景。

总结 #

不需要放弃现有代码模式，优先选择方案1（使用 createComponent 新API），既符合Angular 14+的最佳实践，又能最小化代码改动，完美解决全局组件的DOM挂载需求。

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