使用Nrwl Module Federation访问远程应用路由时出现NG0203错误

核心原因 #

路由的loadChildren回调函数默认不在Angular的注入上下文环境中，而loadRemoteModule内部依赖Angular的注入机制，导致inject()调用失败。

解决方案步骤 #

1. 修改路由配置，包裹注入上下文 #

更新宿主应用的app.router.ts，使用runInInjectionContext和Injector确保loadRemoteModule在正确的注入上下文中执行：

import { NxWelcomeComponent } from './nx-welcome.component';
import { Route } from '@angular/router';
import { loadRemoteModule } from '@nx/angular/mf';
import { Injector, runInInjectionContext } from '@angular/core';

export const appRoutes: Route[] = [
  {
    path: '',
    loadChildren: () => {
      // 创建临时注入器执行远程模块加载
      const injector = Injector.create({ providers: [] });
      return runInInjectionContext(injector, () =>
        loadRemoteModule('remote-app', './Module').then((m) => m.RemoteEntryModule)
      );
    },
  },
  {
    path: '',
    component: NxWelcomeComponent,
  },
];

如果路由是在NgModule中定义的，可直接复用模块的注入器：

// 在路由模块的构造函数中注入Injector
constructor(private injector: Injector) {}

// 路由配置调整
{
  path: '',
  loadChildren: () => runInInjectionContext(this.injector, () =>
    loadRemoteModule('remote-app', './Module').then(m => m.RemoteEntryModule)
  ),
}

2. 验证版本一致性 #

确保宿主应用和远程应用的以下依赖版本完全一致：

• @angular/core、@angular/common、@angular/router
• @nx/angular、@nx/webpack

版本不匹配会引发注入上下文等底层机制的兼容问题。

3. 检查远程模块导出 #

确认远程应用的目标模块已正确暴露：

// 远程应用的entry模块示例
@NgModule({
  // 模块配置
})
export class RemoteEntryModule {}

同时检查远程应用的module-federation.config.ts，确保exposes配置路径正确：

exposes: {
  './Module': './apps/remote-app/src/app/remote-entry/remote-entry.module.ts',
},

4. 清理重建项目 #

尝试清理依赖并重新构建，排除缓存或构建异常问题：

rm -rf node_modules && npm install && nx run-many --target=build --projects=host-app,remote-app

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