具有共享功能的 Angular MFE答案

【问题标题】：Angular MFE with shared features具有共享功能的 Angular MFE
【发布时间】：2021-12-14 00:58:44
【问题描述】：

我正在开发一个具有微前端架构的 Angular 11 项目。我的门户有多个已开发为 MFE 的应用程序。我确实有很多常见的设计组件，例如表单、表格和仪表板等。保持这些组件在 MFE 中可重用的最佳实施方式是什么？

【问题讨论】：

你是在使用模块联合还是其他什么东西来做微前端？

标签： angular shared-libraries micro-frontend

【解决方案1】：

如果您将 MFE 与 @angular-architects/module-federation/webpack 一起使用你可以创建一个共享库（我主要使用 NX 单存储库）。示例配置：

const sharedMappings = new SharedMappings();
sharedMappings.register(tsConfigPath, ['@xxx/shared-components'], workspaceRootPath);

// inside your module.export //
 new ModuleFederationPlugin({
  name: 'xxx',
  filename: 'xxx',
  exposes: {
    './Login': 'apps/frontend/auth/src/app/modules/login/login.module.ts'
  },
  shared: share({
    '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    ...sharedMappings.getDescriptors(),
  }),

您可以找到有关此的更多信息： module federation plugin

【讨论】：

谢谢。为延迟响应道歉。我正在使用带系统 js 的单水疗中心