在single-spa微前端中共享Angular组件的实现方法

可以实现从一个Angular微前端导出组件并在另一个Angular应用中复用，以下是具体落地步骤：

1. 配置组件提供者Angular微前端 #

推荐使用**模块联邦（Module Federation）**来实现组件暴露，这也是single-spa官方认可的跨微前端导入方案：

• 确保项目基于single-spa-angular搭建，安装@angular-architects/module-federation简化配置。
• 修改webpack配置文件，添加组件暴露规则和共享依赖配置：

  const { ModuleFederationPlugin } = require("webpack").container;
  
  module.exports = {
    plugins: [
      new ModuleFederationPlugin({
        name: "componentLibrary", // 微前端唯一标识
        filename: "remoteEntry.js", // 暴露的入口文件
        exposes: {
          // 配置需要共享的组件路径
          "./ButtonComponent": "./src/app/shared/button/button.component.ts",
          "./CardComponent": "./src/app/shared/card/card.component.ts"
        },
        shared: {
          // 强制核心依赖为单例，避免重复加载报错
          "@angular/core": { singleton: true, strictVersion: true },
          "@angular/common": { singleton: true, strictVersion: true },
          "@angular/router": { singleton: true, strictVersion: true },
          "zone.js": { singleton: true }
        }
      })
    ]
  };
  

• 构建该微前端，确保remoteEntry.js及组件产物可通过HTTP访问（本地开发服务或部署后的静态地址均可）。

2. 在消费端Angular微前端中引入共享组件 #

在需要使用共享组件的微前端中，同样通过模块联邦配置远程引用：

• 安装@angular-architects/module-federation后，修改webpack配置添加远程组件映射：

  new ModuleFederationPlugin({
    name: "consumerApp",
    remotes: {
      // 关联远程组件库的入口地址
      componentLibrary: "componentLibrary@http://localhost:4201/remoteEntry.js"
    },
    shared: {
      // 与提供者保持一致的共享依赖配置
      "@angular/core": { singleton: true, strictVersion: true },
      "@angular/common": { singleton: true, strictVersion: true },
      "@angular/router": { singleton: true, strictVersion: true },
      "zone.js": { singleton: true }
    }
  })
  

• 在Angular模块中导入并注册远程组件：

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { CommonModule } from '@angular/common';
  // 直接从远程组件库导入目标组件
  import { ButtonComponent } from 'componentLibrary/ButtonComponent';
  
  @NgModule({
    imports: [CommonModule],
    exports: [ButtonComponent], // 导出组件供模板使用
    schemas: [CUSTOM_ELEMENTS_SCHEMA] // 组件为自定义元素形式时需添加
  })
  export class RemoteComponentsModule {}
  

• 在消费端组件模板中直接使用共享组件：

  <app-button label="共享按钮"></app-button>
  

关键注意事项 #

• 单例依赖保障：Angular核心依赖（如@angular/core、zone.js）必须在所有微前端中保持单例，否则会触发"Multiple instances of Angular detected"这类致命错误，模块联邦的shared配置就是用来确保这一点。
• 版本一致性：提供者和消费端的Angular核心版本必须完全匹配，避免API差异导致的兼容性问题。
• 替代方案：若不想使用模块联邦，也可通过SystemJS动态导入组件，但模块联邦的性能和开发体验更优。

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