迁移至微前端架构后Angular动态创建组件出现No provider报错

问题根因 #

ServiceFoo是懒加载FeatureModule的本地提供者，仅在FeatureModule的子注入器范围内可被注入。独立运行时Angular的Overlay模块会自动关联当前激活路由对应的组件注入器，因此可以正常找到ServiceFoo；迁移到React微前端容器后，Angular的路由上下文、DOM挂载逻辑和React容器冲突，Overlay模块丢失了上下文关联，ModalService创建动态组件时默认使用SharedModule所属的根注入器，无法触达FeatureModule的子注入器，因此抛出无提供者错误。

解决方案 #

方案1：调用ModalService时主动传入当前组件注入器（最推荐，不破坏原有状态隔离和懒加载特性） #

1. 修改ParentComponent调用逻辑，传入当前组件所属的注入器：

import { Injector } from '@angular/core';

export class ParentComponent {
  constructor(
    private modalService: ModalService,
    private currentInjector: Injector
  ) {}

  openModal() {
    this.modalService.open(DynamicallyRenderedComponent, {
      injector: this.currentInjector
    })
  }
}

2. 调整ModalService内部实现，优先使用传入的注入器创建动态组件：

// ModalService核心逻辑示例
open(component: Type<any>, config: {injector?: Injector}) {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(HostComponent);
  // 优先用外部传入的FeatureModule注入器， fallback到默认注入器
  const targetInjector = config.injector ?? this.injector;
  // 创建组件时传入目标注入器
  const hostComponentRef = componentFactory.create(targetInjector);
  // 后续渲染DynamicallyRenderedComponent时也沿用该注入器即可
}

方案2：将ServiceFoo提升到根注入器提供（改造成本最低，适合不需要状态隔离的场景） #

修改ServiceFoo的注解，从模块级提供改为根注入器提供：

@Injectable({
  providedIn: 'root'
})
export class ServiceFoo {}

同时删除FeatureModule的providers数组中ServiceFoo的声明即可。

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