Angular模块联邦微应用随机出现inject()注入上下文错误求助

核心根因分析 #

随机触发的该错误，本质是运行时存在多个@angular/core实例，或是微应用在Angular注入上下文未就绪时执行了依赖注入逻辑。尽管你已指定版本，但Module Federation的包解析、自定义库的打包配置可能存在疏漏，导致核心依赖重复加载。

针对性排查与解决方案 #

1. 强制核心依赖全局单例共享 #

在宿主及所有微应用的Module Federation配置（webpack.config.js或angular.json关联的自定义webpack配置）中，严格配置核心依赖的单例规则：

shared: {
  "@angular/core": {
    singleton: true,
    strictVersion: true,
    requiredVersion: '12.2.0'
  },
  "@angular/common": {
    singleton: true,
    strictVersion: true,
    requiredVersion: '12.2.0'
  },
  "@angular/router": {
    singleton: true,
    strictVersion: true,
    requiredVersion: '12.2.0'
  }
  // 若使用@angular/forms等其他核心包，需同步添加
}

注意：此前设置singleton: false会直接导致多实例问题，必须设为true才能保证全局唯一注入上下文。

2. 修正自定义库的打包配置 #

确保两个自定义库的ng-package.json配置避免打包核心依赖：

{
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "@angular/core": "ng.core",
      "@angular/common": "ng.common"
    }
  },
  "whitelistedNonPeerDependencies": []
}

同时，库的package.json必须将Angular核心依赖设为peerDependencies，而非dependencies：

"peerDependencies": {
  "@angular/core": "^12.2.0",
  "@angular/common": "^12.2.0"
}

3. 规范inject()的调用时机 #

随机错误常因在注入上下文未初始化时调用inject()导致，需调整代码逻辑：

• 禁止在模块顶层、类构造函数中直接调用inject()，移至ngOnInit等组件生命周期钩子中：

  // 错误示例
  constructor() {
    const router = inject(Router);
  }
  
  // 正确示例
  ngOnInit() {
    const router = inject(Router);
  }
  

• 优先使用构造函数注入替代inject()函数，避免上下文丢失风险：

  constructor(private router: Router) {}
  

4. 验证运行时多实例问题 #

在浏览器控制台执行以下代码，排查是否存在多个@angular/core实例：

// 打印所有加载的@angular/core脚本
Array.from(document.querySelectorAll('script')).forEach(script => {
  if (script.src.includes('@angular/core')) {
    console.log('Core加载路径:', script.src);
  }
});

// 统计全局core实例数量
const coreInstances = [];
Object.keys(window).forEach(key => {
  if (key.includes('__core-js_shared__') || key.includes('ng.core')) {
    coreInstances.push(window[key]);
  }
});
console.log('Core实例数量:', coreInstances.length);

若输出多个实例，需检查微应用是否未遵循共享配置，或webpack配置未正确生效。

5. 调整微应用加载时机 #

在宿主路由配置中，确保微应用模块在Angular Zone上下文内加载，避免异步加载导致的上下文丢失：

{
  path: 'micro-app',
  loadChildren: () => import('micro-app/Module')
    .then(m => m.RemoteModule)
    .catch(err => import('./fallback/fallback.module').then(m => m.FallbackModule))
}

同时，微应用main.ts需确保在Angular平台初始化后再执行代码：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

额外排查点 #

• 清理浏览器缓存：开发环境禁用缓存，生产环境为打包文件添加内容哈希，避免旧版本资源残留；
• 检查自定义库产物：确认库的dist目录未包含@angular/core代码，可通过解压umd包验证。

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