Angular模块联邦：同一应用能否同时作为Shell和Remote调用自身MFE？

可以让一个应用同时作为Shell（宿主）和Remote（远程模块提供者），但你的当前配置存在循环引用问题，导致了Uncaught TypeError: Cannot read properties of undefined (reading 'call')错误。

问题分析 #

你的配置中，name被设为'mfe'，同时remotes里又引用了同名的"mfe": "https://local.app/remoteEntry.js"，这会导致应用启动时尝试加载自身的remoteEntry文件，形成循环依赖，打乱模块加载逻辑，最终触发bootstrap中的错误。

修复方案 #

1. 避免同名循环引用

   • 如果只是在当前应用内使用自身暴露的模块，完全不需要通过remotes配置引用，直接本地导入即可，因为模块本身就在项目中。
   • 若需要在不同部署实例中作为Shell调用该应用的Remote模块，要确保remotes里的名称和自身name不重复，比如修改配置如下：

     const federatedModules = withModuleFederationPlugin({
         name: 'shellMfe',
         exposes: {
             './DownloadModule': './src/app/feature-modules/download/download.module.ts',
         },
         remotes:{
             "remoteMfe": "https://local.app/remoteEntry.js"
         },
         shared: {
             ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true })
         }
     });
     

2. 本地使用暴露模块的正确方式
   直接通过本地路径导入自身模块，无需走模块联邦的远程加载流程：

   import { DownloadModule } from './app/feature-modules/download/download.module.ts';
   

3. 调试建议
   检查bootstrap.ts中导入远程模块的代码，避免在应用初始化阶段同步加载未就绪的远程模块，必要时改用动态导入：

   // 动态导入避免初始化时的加载冲突
   const loadDownloadModule = async () => {
       const { DownloadModule } = await import('remoteMfe/DownloadModule');
       // 执行后续业务逻辑
   };
   

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