基于Module Federation的Angular微前端组件共享最佳实践咨询

方案1：通过Module Federation直接暴露MFE1的组件（首推，贴合微前端原生设计） #

这是最符合Module Federation设计初衷的方式，优势很直接：

• 不用额外维护独立组件库，组件版本和MFE1完全同步，避免版本不一致导致的兼容问题
• 真正按需加载：其他MFEs只拉取需要的组件代码，不用加载整个MFE1的冗余代码
• 参数传递无门槛：共享组件的@Input/@Output和本地组件用法完全一致，直接传参就行

方案2：独立组件库模式（适合跨场景复用） #

你之前尝试的组件库模式完全合理，尤其适合这些场景：

• 这个组件需要给非微前端的Angular项目用
• 组件迭代节奏和MFE1无关，需要单独做版本管理、独立发布
• 多个团队需要共同维护这个组件，单独的库更方便协作

Shell层面的实现建议 #

不建议在shell里直接封装组件给MFEs用——这会把shell变成组件中转站，违背了微前端独立部署的原则，而且组件更新时shell也得跟着改，反而增加维护成本。

更合理的shell层面优化是统一配置共享规则：在shell的webpack配置里，把MFE1的组件配置成全局可共享的远程模块，其他MFEs就不用重复写远程地址、模块名这些配置了，比如：

// shell的webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  shared: {
    // 核心依赖共享
    '@angular/core': { singleton: true, strictVersion: true },
    // 把MFE1的组件配置为共享模块
    'mfe1/SharedComponent': {
      singleton: false, // 允许每个MFE加载自己的实例，避免状态冲突
      requiredVersion: '^1.0.0',
    },
  },
});

• 核心依赖版本必须对齐：所有MFEs的Angular核心包（@angular/core、@angular/common等）版本要和MFE1一致，不然会出现运行时错误。通过Module Federation的shared配置开启strictVersion: true，强制版本统一。
• 别暴露整个模块：MFE1里只导出需要共享的单个组件，别把整个NgModule暴露出去，不然其他MFEs会加载一堆没用的代码。比如在MFE1的webpack里只写'./SharedComponent': './src/app/path/to/component.ts'。
• 组件状态要隔离：共享组件别依赖MFE1的全局状态（比如NgRx Store），如果需要传状态，尽量用@Input/@Output，或者单独抽一个共享服务（这个服务也要配置成共享依赖）。
• 处理加载失败场景：其他MFEs加载MFE1组件时，要加错误捕获——比如MFE1挂了的话，得给用户提示，而不是白屏。可以用Angular的loadChildren结合catchError，或者用@angular-architects/module-federation-tools里的工具类。
• 类型提示不能少：为了让其他MFEs写代码时有类型提示，MFE1要导出组件的类型定义。要么在MFE1的package.json里配置types字段，要么把组件的接口抽成一个公共类型包（组件库模式的话更方便）。

MFE1配置（暴露组件） #

// mfe1/webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'mfe1',
      filename: 'remoteEntry.js',
      exposes: {
        './SharedComponent': './src/app/shared-components/user-card/user-card.component.ts',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true },
        '@angular/common': { singleton: true, strictVersion: true },
      },
    }),
  ],
};

其他MFEs加载组件（路由方式） #

// mfe2/src/app/remote-entry/remote-entry-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { WebComponentWrapper } from '@angular-architects/module-federation-tools';

const routes: Routes = [
  {
    path: 'user-card',
    component: WebComponentWrapper,
    data: {
      remoteEntry: 'http://localhost:3001/remoteEntry.js',
      remoteName: 'mfe1',
      exposedModule: './SharedComponent',
      elementName: 'app-user-card',
      // 传递参数给组件
      props: { userId: '123' }
    }
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class RemoteEntryRoutingModule {}

组件库模式使用示例 #

如果用独立组件库，安装后直接像本地组件一样用：

// mfe3/src/app/some/some.module.ts
import { NgModule } from '@angular/core';
import { UserCardComponent } from '@your-org/shared-components';

@NgModule({
  declarations: [/* 本地组件 */],
  imports: [UserCardComponent], // 组件是standalone的话直接导入
})
export class SomeModule {}

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