Angular模块联邦：独立组件用loadRemoteModule时导入forRoot()模块的问题

问题场景 #

在Angular多项目应用中，通过loadRemoteModule()加载独立组件作为无路由小部件时，模块联邦可正常运行，但遇到需通过.forRoot()初始化的第三方模块（如TimeagoModule）时陷入矛盾：

• 若在独立组件的imports中加入TimeagoModule.forRoot()，会触发NG2012错误：

  NG2012: 'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'- style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

• 若仅导入TimeagoModule而非.forRoot()版本，运行时会抛出依赖缺失错误：NullInjectorError: No provider for TimeagoFormatter!

现有配置 #

webpack.config.js（远程应用） #

module.exports = withModuleFederationPlugin({
  name: 'my-widget',
  exposes: {
    './Config': './src/libs/my-standalone-component.ts',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

主应用加载代码 #

const options: PluginOptions = {
  type: 'module',
  remoteEntry: '../my-component/remoteEntry.js',
  exposedModule: './Config',
  className: 'MyStandaloneComponent'
};
const component$ = from(loadRemoteModule(options)).pipe(
  map((exposedModules: any) => {
    return exposedModules['MyStandaloneComponent'];
  })
);

独立组件代码 #

@Component({
  standalone: true,
  imports: [
    CommonModule,
    TimeagoModule
  ],
  ...
})
export class MyStandaloneComponent

临时解决方案 #

手动在独立组件的providers数组中添加.forRoot()原本提供的依赖：

providers: [
  {
    provide: TimeagoFormatter,
    useClass: TimeagoDefaultFormatter
  },
  {
    provide: TimeagoClock,
    useClass: TimeagoDefaultClock
  }
],

但该方案仅适用于简单场景，无法覆盖其他库可能在ModuleWithProviders中实现的复杂逻辑，不具备通用性。

通用解决方案建议 #

1. 在主应用的Bootstrap阶段初始化.forRoot()模块 #

将需要.forRoot()初始化的模块（如TimeagoModule.forRoot()）添加到主应用的根注入器中：

• 若主应用基于NgModule：在AppModule的imports数组中导入TimeagoModule.forRoot()
• 若主应用为独立应用：在bootstrapApplication的providers数组中配置对应依赖

远程组件会共享主应用根注入器的依赖，无需在自身imports中添加.forRoot()。

2. 远程应用封装NgModule暴露，而非直接暴露独立组件 #

在远程应用中创建一个NgModule，专门处理需要.forRoot()初始化的模块，再将该NgModule暴露给主应用：

@NgModule({
  imports: [
    TimeagoModule.forRoot()
  ],
  exports: [
    MyStandaloneComponent
  ]
})
export class WidgetModule {}

修改webpack.config.js的暴露配置：

exposes: {
  './WidgetModule': './src/libs/widget.module.ts',
},

主应用加载该模块后，可通过模块的注入器实例化组件，确保.forRoot()的逻辑被正确执行。

3. 使用库提供的Standalone兼容API #

部分现代Angular库已提供替代.forRoot()的standalone风格API（如provideTimeago()），可直接将其添加到独立组件的providers数组中，替代.forRoot()的导入。

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