如何用原生JavaScript在ASP.NET 4.0 ASPX页面加载Angular15微前端

可以通过纯JavaScript直接集成，无需iframe，核心是利用Webpack Module Federation的原生API手动初始化共享作用域并加载模块，具体步骤如下：

1. 准备ASPX页面基础环境 #

在ASPX页面的<head>或<body>末尾添加必要的依赖脚本，注意所有依赖版本必须与你的Angular15 MFE使用的版本完全一致：

<!-- 加载Zone.js的UMD压缩包（Angular核心依赖） -->
<script src="/path/to/zone.min.js"></script>
<!-- 加载Angular核心模块的UMD压缩包 -->
<script src="/path/to/core.umd.min.js"></script>
<script src="/path/to/common.umd.min.js"></script>
<script src="/path/to/compiler.umd.min.js"></script>
<script src="/path/to/platform-browser.umd.min.js"></script>
<script src="/path/to/platform-browser-dynamic.umd.min.js"></script>
<!-- 加载RxJS的UMD压缩包（Angular依赖） -->
<script src="/path/to/rxjs.umd.min.js"></script>
<!-- 加载你的MFE部署后的remoteEntry.js文件 -->
<script src="http://your-mfe-deploy-domain/remoteEntry.js"></script>

2. 添加MFE挂载容器 #

在ASPX页面的合适位置添加用于挂载MFE的DOM元素，需与MFE根组件的selector属性匹配：

<!-- MFE挂载容器 -->
<div id="referral-mfe-container">
  <app-referral-mfe></app-referral-mfe> <!-- 替换为你的MFE根组件selector -->
</div>

3. 编写加载MFE的JavaScript代码 #

在页面末尾添加以下脚本，手动初始化Module Federation共享作用域并加载你的MFE模块：

async function loadReferralMfe() {
  try {
    // 初始化Module Federation默认共享作用域
    await __webpack_init_sharing__('default');
    // 获取MFE容器（对应webpack.config.js中的name字段：ss-emr-modules）
    const mfeContainer = window['ss-emr-modules'];
    // 初始化容器的共享作用域
    await mfeContainer.init(__webpack_share_scopes__.default);
    
    // 加载MFE暴露的模块（对应exposes中的./ReferralModule）
    const moduleFactory = await mfeContainer.get('./ReferralModule');
    const mfeModule = moduleFactory();
    
    // 启动Angular模块并挂载到指定容器
    const { platformBrowserDynamic } = ng.platformBrowserDynamic;
    await platformBrowserDynamic().bootstrapModule(mfeModule.ReferralModule)
      .catch(err => console.error('MFE启动失败:', err));
  } catch (error) {
    console.error('加载MFE出错:', error);
  }
}

// 页面DOM加载完成后执行加载逻辑
window.addEventListener('DOMContentLoaded', loadReferralMfe);

关键注意事项 #

• CORS配置：如果MFE与ASPX页面部署在不同域名，需在MFE的服务器端配置CORS，允许ASPX页面域名的跨域请求。
• 版本一致性：所有依赖脚本（Zone.js、Angular、RxJS）的版本必须与你的Angular15 MFE使用的版本完全一致，避免兼容性问题。
• 共享依赖冲突：如果WebForm页面已有其他版本的Angular或RxJS，需调整MFE的shared配置，确保依赖的singleton模式生效，避免重复加载。
• 根组件匹配：确保ASPX页面中的挂载元素与MFE根组件的selector属性完全一致，否则Angular无法正确渲染组件。

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