Angular 12微前端禁用Module Federation共享后出现inject()注入上下文错误

问题场景 #

基于Angular 12的微前端应用，在配置共享核心Angular包时运行正常：

shared: {
        '@angular/core': { eager: true, singleton: true },
        '@angular/common': { eager: true, singleton: true },
        '@angular/router': { eager: true, singleton: true },
      },

但将主应用和子应用的shared配置设为空后，触发运行时错误：

子应用配置 #

plugins: [
    new ModuleFederationPlugin({
      name: 'profile',
      library: { type: 'var', name: 'profile' },
      filename: 'remoteEntry.js',
      exposes: {
        ProfileModule: './projects/mdmf-profile/src/app/profile/profile.module.ts',
      },
      shared: {
      },
    }),
  ],

主应用配置 #

plugins: [
    new ModuleFederationPlugin({
      shared: {
      },
    }),
  ],

错误信息 #

ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
    at yD (441.js:1:26044)
    at Object.gt (441.js:1:26219)
    at d.ɵfac [as factory] (441.js:1:168088)
    at AE.hydrate (main.js:1:201332)
    at AE.get (main.js:1:199395)
    at main.js:1:199708
    at Set.forEach (<anonymous>)
    at AE._resolveInjectorDefTypes (main.js:1:199692)
    at new iS (main.js:1:230293)
    at hd.create (main.js:1:230989)
    at Ge (polyfills.js:1:162723)
    at Ge (polyfills.js:1:162219)
    at polyfills.js:1:163611
    at ce.invokeTask (polyfills.js:1:153753)
    at Object.onInvokeTask (main.js:1:235279)
    at ce.invokeTask (polyfills.js:1:153672)
    at _e.runTask (polyfills.js:1:149032)
    at Q (polyfills.js:1:155855)

尝试通过tsconfig.json的paths配置映射Angular库路径，无效果：

"paths": {
      "@angular/*": [
        "node_modules/@angular/*"
      ]
    },

解决方案 #

核心原因 #

Angular的依赖注入(DI)系统依赖单例的核心库实例（如@angular/core）。移除共享配置后，主应用和子应用会各自加载一份独立的@angular/core，导致注入上下文不统一，触发inject()错误。tsconfig的paths仅作用于编译时路径映射，无法解决运行时多实例冲突的问题。

具体解决步骤 #

1. 必须共享核心Angular包
   不能完全移除shared配置，需确保核心Angular包在主应用和子应用中共享为单例。可以选择手动配置或自动共享：

   • 手动配置（保持原有工作模式）
     在主应用和子应用的ModuleFederationPlugin配置中，保留核心包的共享设置：

     shared: {
       '@angular/core': { eager: true, singleton: true },
       '@angular/common': { eager: true, singleton: true },
       '@angular/router': { eager: true, singleton: true },
       // 若有其他依赖（如@angular/forms）也需同步共享
     },
     

   • 自动共享（简化配置）
     使用@angular-architects/module-federation提供的shareAll工具，自动共享所有依赖并强制单例：

     const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
     
     module.exports = withModuleFederationPlugin({
       // 子应用需额外配置name、exposes等字段
       shared: shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
     });
     

2. 验证版本一致性
   确保主应用和所有子应用的Angular核心包版本完全一致，避免因版本差异导致的共享冲突。

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