微前端Module Federation部署后出现NG0203错误求助

问题 #

我正在开发基于Module Federation的微前端项目，shell项目与remote项目分属不同代码仓库，部署在不同服务器上。两个项目单独运行正常，但通过shell访问remote时控制台抛出NG0203错误（该错误与inject()函数相关，但我未直接使用该函数）。我尝试过暴露特定模块、改用根模块、预加载等方案，均未解决问题。

相关代码 #

Shell项目路由调用Remote代码

{
    path: 'analytics',
    loadChildren: () => loadRemoteModule({
      remoteEntry: `${environment.analyticsServerUrl}/remoteEntry.js`,
      type: 'module',
      exposedModule: './AnalyticsModule'    
    })
    .then(m => m.AppModule)
},

Shell项目webpack.config.js

const webpack = require('webpack');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  output: {
    publicPath: 'http://localhost:4200/',
    uniqueName: 'o360',
    scriptType: 'text/javascript',
  },
  optimization: {
    runtimeChunk: false,
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        analytics: 'http://localhost:4201',
      },
      shared: {
        '@angular/core': {
          eager: true,
          singleton: true
        },
        '@angular/common': {
          eager: true,
          singleton: true
        },
        '@angular/router': {
          eager: true,
          singleton: true
        },
        '@ngxs/store': {
          singleton: true,
          eager: true
        },
        'social-login': {
          singleton: true,
          eager: true
        },
      },
    }),
  ],
};

Remote项目webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'), [ /* mapped paths to share */ ]);

module.exports = {
  output: {
    uniqueName: "analytics",
    publicPath: 'http://localhost:4201/'
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: {
        type: "module"
      },

      name: "analytics",
      filename: "remoteEntry.js",
      exposes: {
        './AnalyticsModule': './src/app/app.module.ts',
      },

      shared: share({
        "@angular/core": {
          singleton: true,
          eager: true
        },
        "@angular/common": {
          singleton: true,
          eager: true
        },
        "@angular/common/http": {
          singleton: true,
          eager: true
        },
        "@angular/router": {
          singleton: true,
          eager: true
        },
        "shared-lib": {
          singleton: true,
          eager: true
        },

        ...sharedMappings.getDescriptors()
      })

    }),
    sharedMappings.getPlugin()
  ],
};

控制台错误信息 #

Error: Uncaught (in promise): Error: NG0203
Error: NG0203
    at Fy (remoteEntry.js:1:109371)
    at Nt (remoteEntry.js:1:109522)
    at e.ɵfac [as factory] (remoteEntry.js:1:256984)
    at R1.hydrate (vendor.c5829c2ac166cc04.js:1:4138001)
    at R1.get (vendor.c5829c2ac166cc04.js:1:4135925)
    at vendor.c5829c2ac166cc04.js:1:4136752
    at Set.forEach (<anonymous>)
    at R1._resolveInjectorDefTypes (vendor.c5829c2ac166cc04.js:1:4136736)
    at new Fx (vendor.c5829c2ac166cc04.js:1:4174507)
    at db.create (vendor.c5829c2ac166cc04.js:1:4175218)
    at z (polyfills.b96b59aa4b290638.js:1:15990)
    at z (polyfills.b96b59aa4b290638.js:1:15525)
    at polyfills.b96b59aa4b290638.js:1:16838
    at v.invokeTask (polyfills.b96b59aa4b290638.js:1:7185)
    at Object.onInvokeTask (vendor.c5829c2ac166cc04.js:1:4191629)
    at v.invokeTask (polyfills.b96b59aa4b290638.js:1:7106)
    at M.runTask (polyfills.b96b59aa4b290638.js:1:2580)
    at _ (polyfills.b96b59aa4b290638.js:1:9200)

可能的解决方向 #

1. 对齐Shared依赖的版本与配置 #

NG0203常因共享依赖不一致导致注入上下文冲突：

• 确保Shell和Remote项目中所有shared依赖（如@angular/core、@angular/common等）的版本完全一致，版本差异会破坏单例模式。
• 检查Remote项目的shared配置，确保share()函数处理的依赖和Shell保持统一，比如Remote中额外的@angular/common/http需要在Shell中也加入shared配置，避免重复加载。

2. 修正模块暴露与加载的匹配问题 #

当前Shell路由中exposedModule: './AnalyticsModule'，但Remote的exposes配置指向根AppModule，加载后却取m.AppModule，容易导致模块识别混乱：

• 修改Remote的exposes配置，指向实际的AnalyticsModule（而非根AppModule），例如：'./AnalyticsModule': './src/app/analytics/analytics.module.ts'
• 同步Shell的加载逻辑，直接返回暴露的模块：

  loadChildren: () => loadRemoteModule({
    remoteEntry: `${environment.analyticsServerUrl}/remoteEntry.js`,
    type: 'module',
    exposedModule: './AnalyticsModule'    
  }).then(m => m.AnalyticsModule)
  

3. 检查注入上下文的完整性 #

即使没直接用inject()，Angular的模块、组件、服务内部可能隐式使用注入：

• 确保Remote项目的暴露模块是懒加载友好的NgModule，避免在模块构造函数中直接依赖需要注入的服务。
• 调整eager加载配置：仅保留@angular/core等核心包的eager: true，将非核心依赖的eager改为false，避免依赖提前初始化破坏微前端隔离上下文。

4. 验证RemoteEntry的加载方式 #

• 确保Shell中type: 'module'的加载方式，与Remote的webpack配置中experiments.outputModule: true、library.type: "module"完全匹配。
• 检查publicPath配置，确保Shell和Remote的publicPath都是可访问的绝对路径，避免加载资源时出现跨域或路径错误。

内容的提问来源于stack exchange，提问作者Abhinav kumar jha