Angular 12：动态加载模块时服务注入失败及单例问题排查

核心原因 #

动态编译模块时，默认会创建独立的注入器上下文，不会自动继承根注入器的提供者；同时forRoot()提供的单例服务未被动态模块正确引用，导致指令抛出NullInjectorError，且每次编译都会生成新的服务实例。

具体解决步骤 #

1. 关联根注入器到动态编译上下文 #

在调用compileModuleAndAllComponentsAsync时，通过CompilerOptions传入根注入器中的目标服务实例，确保动态模块复用全局单例：

// 获取根注入器实例
const rootInjector = inject(Injector);

// 配置编译选项，复用根注入器的服务
const compilerOptions: CompilerOptions = {
  providers: [
    { provide: SERVICE_INYECTION_TOKEN, useValue: rootInjector.get(SERVICE_INYECTION_TOKEN) }
  ]
};

// 编译模块时传入配置
const moduleFactory = await compiler.compileModuleAndAllComponentsAsync(DynamicModuleC, compilerOptions);

2. 规范动态模块的库导入 #

在动态模块DynamicModuleC中导入库的forRoot()，但不重复提供服务，避免创建新实例：

@NgModule({
  imports: [
    YourLibraryModule.forRoot({ /* 保持与根模块一致的配置 */ })
  ],
  declarations: [DynamicComponentC],
  providers: [] // 清空providers，避免覆盖根服务
})
export class DynamicModuleC {}

3. 创建组件时指定根注入器 #

调用viewContainerRef.createComponent时，显式将父注入器设为根注入器，确保组件上下文使用全局单例：

const componentFactory = moduleFactory.componentFactories.find(f => f.componentType === DynamicComponentC);
const componentRef = viewContainerRef.createComponent(componentFactory, {
  injector: rootInjector
});

4. 验证单例有效性 #

在目标服务中添加唯一标识属性，用于确认实例唯一性：

@Injectable()
export class TargetService {
  public instanceId = Math.random().toString(36).slice(2);
}

在组件中打印该属性，若多次动态加载后instanceId一致，则单例生效。

关键提示 #

• 动态编译模块默认隔离注入上下文，必须显式关联根注入器才能复用全局服务。
• forRoot()仅需在根模块调用一次，其他模块（包括动态模块）导入时会自动复用根实例，无需重复配置。

内容的提问来源于stack exchange，提问作者Marco Antonio Gallardo