如何在Angular 17.1中通过Native Federation加载AngularJS 1.8自定义元素

问题背景 #

基于Angular 17.1的微前端壳应用，通过Native Federation加载暴露在http://localhost:4203/remoteEntry.js的AngularJS 1.8自定义元素。浏览器可直接访问该JS文件且无CORS问题，但壳应用路由访问时加载失败。

核心问题与修复方案 #

1. 暴露模块导出与壳应用引用不匹配 #

壳应用路由中尝试获取m.helloComponent，但AngularJS模块实际导出的是MfeAngularJs类，二者不匹配导致加载失败。

修复方式二选一：

• 方案一：修改AngularJS模块的导出命名

  // app/app.module.mjs
  angular.module("app", []).component("helloComponent", { /* ... 原有代码 ... */ })
  
  export class MfeAngularJs extends HTMLElement { /* ... 原有代码 ... */ }
  
  // 新增导出别名，匹配壳应用引用
  export const helloComponent = MfeAngularJs;
  
  customElements.define("angularjs-element", MfeAngularJs);
  

• 方案二：修改壳应用路由的引用目标

  {
    path: 'angularjs',
    loadChildren: () =>
      loadRemoteModule({
        remoteEntry: 'http://localhost:4203/remoteEntry.js',
        remoteName: 'angularjs',
        exposedModule: './web-components',
      }).then((m) => m.MfeAngularJs), // 改为实际导出的类名
  }
  

2. AngularJS初始化逻辑错误 #

当前代码注释掉了自定义元素内部的AngularJS bootstrap逻辑，导致组件无法初始化；同时全局bootstrap会污染壳应用DOM环境。

修复步骤：

• 取消connectedCallback内的bootstrap注释，仅在自定义元素内部初始化AngularJS
• 删除全局bootstrap代码，避免影响壳应用

  // app/app.module.mjs
  export class MfeAngularJs extends HTMLElement {
    connectedCallback() {
      const root = document.createElement("hello-component");
      this.appendChild(root);
      angular.bootstrap(root, ["app"]); // 取消注释
    }
  }
  
  customElements.define("angularjs-element", MfeAngularJs);
  
  // 删除以下全局bootstrap代码
  // angular.element(function () {
  //   angular.bootstrap(document, ["app"]);
  // });
  

3. Webpack Module Federation冗余配置 #

AngularJS的webpack配置中，remotes字段引用了自身，会导致循环引用问题，需删除该冗余配置。

修复后的Webpack插件配置：

// webpack.config.js
new ModuleFederationPlugin({
  name: "angularjs",
  library: { type: "var", name: "angularjs" },
  filename: "remoteEntry.js",
  exposes: {
    "./web-components": "./app/app.module.mjs"
  },
  // 删除以下冗余的remotes配置
  // remotes: {
  //   angularjs: "http://localhost:4203/remoteEntry.js"
  // },
  shared: []
})

4. 加载错误捕获与排查 #

在壳应用路由中添加错误捕获，打印具体报错信息，定位加载失败的深层原因：

{
  path: 'angularjs',
  loadChildren: () =>
    loadRemoteModule({
      remoteEntry: 'http://localhost:4203/remoteEntry.js',
      remoteName: 'angularjs',
      exposedModule: './web-components',
    }).then((m) => m.MfeAngularJs)
    .catch(err => {
      console.error('远程模块加载失败详情:', err);
      throw err;
    }),
}

验证步骤 #

1. 重启AngularJS远程应用（端口4203）
2. 重启Angular 17壳应用
3. 访问壳应用的/angularjs路由，检查组件是否正常渲染

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