MFE微前端:如何捕捉远程应用的remote.js加载失败的错误?

        在使用 module-federation 中的 loadRemoteModule 时,如果模块加载失败(比如远程应用不可访问、模块不存在、网络问题等),通常会遇到类似 Uncaught (in promise) 的错误。这类错误是 异步的 Promise 错误,因此需要用 try...catch.catch() 来捕捉。

✅ 错误捕捉方式(推荐使用 try...catch

如果使用的是 async/await 方式来调用 loadRemoteModule,可以进行下面的处理:

import { loadRemoteModule } from '@angular-architects/module-federation';

async function loadRemote() {
  try {
    const module = await loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://localhost:3000/remoteEntry.js',
      exposedModule: './Module'
    });

    // 你可以在这里使用 module 了
  } catch (error) {
    console.error('远程模块加载失败:', error);
    // 你也可以在这里处理 UI 提示、fallback 显示等逻辑
  }
}

✅ 如果使用的是 .then().catch() 方式:

loadRemoteModule({
  type: 'module',
  remoteEntry: 'http://localhost:3000/remoteEntry.js',
  exposedModule: './Module'
}).then((module) => {
  // 成功加载
}).catch((error) => {
  console.error('远程模块加载失败:', error);
});

    如何捕捉到 remoteEntry.js 404报错

    remoteEntry.js 加载失败(比如 404),这个错误无法被 loadRemoteModule().catch()try...catch 捕捉到

    这是因为:

    ❗ 404 错误发生在

    你可能感兴趣的:(微前端-MFE,报错情况总结-解决方法记录,前端,angular.js,webpack,学习,angular)