升级至Angular 14后微前端模块提供者无法找到求助

针对Angular 14升级后动态加载模块服务无法解析的问题，结合Angular版本变化和模块实例化逻辑调整，给出以下具体建议：

1. 调整注入器传递逻辑 #

Angular 14对动态模块的注入器层级处理更严格，直接使用宿主组件的injector可能导致模块providers无法被正确关联。尝试改用ViewContainerRef的注入器来创建NgModule实例：

loadRemoteModule({
    type: "script",
    remoteEntry,
    remoteName,
    exposedModule,
})
.then(container => {
    const ngModule = container[moduleName];
    // 改用容器的注入器而非组件注入器
    this.moduleRef = createNgModule(ngModule, this.container.injector);
});

2. 替换废弃的ComponentFactoryResolver #

Angular 14开始ComponentFactoryResolver已被标记为废弃，推荐直接使用ViewContainerRef.createComponent并指定模块注入器，确保组件能获取到模块的providers：

renderLazyComponent(myComponent): void {
    // 直接创建组件并关联模块注入器
    this._containerRef = this.container.createComponent(myComponent, {
        injector: this.moduleRef.injector
    });
}

3. 检查微前端模块的Providers定义 #

Angular 14编译器对provider的依赖解析更严格，若微前端模块中存在箭头函数形式的useFactory，需确保依赖通过inject()显式声明：

// 错误示例：未显式声明依赖
providers: [
    {
        provide: MyService,
        useFactory: () => new MyService(SomeDependency) // 无法解析SomeDependency
    }
]

// 正确示例：使用inject()获取依赖
providers: [
    {
        provide: MyService,
        useFactory: () => new MyService(inject(SomeDependency))
    }
]

4. 验证Module Federation的共享依赖配置 #

即使你认为问题不在MF，仍需确保宿主和微前端的共享依赖配置一致，避免核心包多版本导致注入器冲突：

// webpack.config.js 共享配置示例
shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true },
    "@angular/router": { singleton: true, strictVersion: true }
}

5. 调试注入器排查问题 #

在模块创建后，打印注入器的providers列表，确认服务是否已注册：

this.moduleRef = createNgModule(ngModule, this.container.injector);
// 打印模块注入器的所有providers（仅用于调试）
console.log(this.moduleRef.injector['_providers']);

同时在动态组件中尝试用inject()手动获取服务，排查是否为注入器传递问题：

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

export class DynamicComponent {
    private myService = inject(MyService); // 若能获取则说明注入器有效
}

内容的提问来源于stack exchange，提问作者E.Tiake