# @angular-architects/module-federation 中文文档

规范地址：https://npmcn.com/package/%40angular-architects/module-federation/

版本：22\.0\.0
npm 元数据更新时间：2026-09-11T09:45:34.072Z
中文译文更新时间：2026-11-06T04:09:35.845Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40angular-architects/module-federation
原文对照：https://npmcn.com/package/%40angular-architects/module-federation/?lang=original
项目主页：https://github.com/angular-architects/module-federation-plugin#readme
源码仓库：https://github.com/angular-architects/module-federation-plugin

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：197 kB，141 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2020-10-10T23:26:41.748Z
- 最新版本发布：2026-09-11T09:45:33.871Z
- 近 30 天下载量：519257（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：103（近 12 个月 6 个）

## 中文简介

与Angular CLI无缝地使用Webpack模块联合会.

## 安装

```sh
npm install @angular-architects/module-federation
```

也可以使用：`pnpm add @angular-architects/module-federation`、`yarn add @angular-architects/module-federation`、`bun add @angular-architects/module-federation`

## README

# @angular-architects/模块编织

与Angular CLI无缝地使用Webpack模块联合会.

## 谢谢

我们站在巨人的肩上。 感谢以下帮助实现这个项目的人:

-   [科勒姆·费里](https://x.com/ferrycolum)Nx 小组成员
-   [扎克・杰克逊](https://x.com/ScriptedAlchemy),模块联合会发明者
-   [托比亚斯·克珀斯](https://twitter.com/wSokra), Webpack 创建者
-   [德米特里·谢克霍夫佐夫](https://twitter.com/valorkin),角 GDE 数据
-   [迈克尔·埃格-齐克斯](https://twitter.com/MikeZks),角建筑师

## 先决条件

-   角 CLI 12 或以上

## 动机

模块联合会允许将单独编译和部署的代码(如微前端或插件)加载到应用程序中. 这个插件使得模块联合会与Angular和CLI合作.

## 支持若干技术

• 支持网络包装和rspack(实验性,下源)

QQ 支持角 CLI 和 Nx

## 特征

\* 生成模块联盟配置的骨架.

QQ 安装自定义构建器以启用模块联盟 .

\* 指定一个新的港口服务(`ng serve`)几个项目同时进行.

模块 Federation 配置是一个 **部分** 网页包配置。 它只包含控制模块联合会的东西. 其余的由CLI照常产生.

自1.2版以来,我们还提供一些先进的功能,例如:

动态模块联合会支助

分享 Monorepo 的 Libs

## 要使用哪个版本 ?

我们将提供至少每个角力大修一个大修,以跟踪角力生态系统及其创新:

-   角12: @angular-architects/module-federation: ^12.0.0 (中文(简体) )
-   角13: @angular-architects/模块-federation:~14.2.0
-   角14: @angular-architects/module-federation: ^14.3.0
-   角15: @angular-architects/module-federation: ^15.0
-   角16: @angular-architects/module-federation: ^16.0
-   角17: @angular-architects/module-federation: ^17.0
-   角18: @angular-architects/module-federation: ^18.0
-   角19: @angular-architects/模块-发音:^19.0.0
-   角20: @angular-architects/模块-federation: ^20.0.0
-   角 21: @angular-architects/module-fedferation: ^21. 2.0
-   角22: @angular-architects/module-federation: ^22.0.0 (中文(简体) )

从Angular 13开始,我们不得不添加一些修改来适应Angular CLI. 请见下一节.

## 网络包装和红外包装

插件的ng-add图问您是否想要使用传统的基于Webpack的构建器,还是(目前实验性,快活性,下一代)的rspack构建器. 两者都通过模块联合会得到支持.

对于红外线整合,我们是在 `@nx/angular-rspack` ——最初是科勒姆·费里出色的社区项目(Colum Ferry)`@ng-rsbuild/plugin-angular` 编号 : `@ng-rspack/build`),现由Nx团队维护. 因此,所有使rspack与Angular合作的功劳都归于Colum和Nx团队.

寻找 Esbuild/ applicationBuilder 路线吗 ? 即土著联合会,它现在生活在自己的组织中: [github.com/土生土长](https://github.com/native-federation)。 。 。 .

## 更新

此库支持 `ng update`数字 :

```
ng update @angular-architects/module-federation
```

如果用手更新(例如通过) `npm install`),确保您同时安装相应的版本 `@angular-builders/custom-webpack` 匹配您的 Angular 主干道(Angular 22 第22版,Angular 21 第21版等).

> 注:最多并包括Angular 21,该套件使用 `ngx-build-plus` 以插入网络包配置。 至于Angular 22 它使用 `@angular-builders/custom-webpack`运行 `ng update @angular-architects/module-federation` 自动迁移已有的工作空间;如果您手动更新,请删除 `ngx-build-plus` 切换你的 `angular.json` 建构器为 `@angular-builders/custom-webpack:*`。 。 。 .

## 从角12或更低处升级

从Angular 13开始,CLI生成了EcmaScript模块而不是脚本文件. 这影响了我们如何与模块联合会合作.

有关移民的信息:

[角13+移徙指南](https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md)

如果你从头开始, `ng add` 将照顾这些设置.

## 使用量 +++

### 角 CLI 函数

1.  `ng add @angular-architects/module-federation`
2.  调整生成 `webpack.config.js` 文件
3.  重复此选项用于您工作空间中的更多工程( 如果需要)

### 无

1.  `npm install --save-dev @angular-architects/module-federation`
2.  `nx g @angular-architects/module-federation:init`
3.  调整生成 `webpack.config.js` 文件
4.  重复此选项用于您工作空间中的更多工程( 如果需要)

### QQ 第14版+: 使用 -- 类型切换来获得新的精简配置

有了第14版,我们引入了一个 -- 类型开关 `ng add` 编辑 `init` 示意图. 设定为以下一个值以获得更精简的配置文件 :

-   `host`
-   `dynamic-host`
-   `remote`

一个动态主机在运行时从配置文件读取微前端的URL.

## 开始QQ

请在这里找到一个 [教程](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md) 显示如何使用此插件.

![Microfrontend Loaded into Shell](https://github.com/angular-architects/module-federation-plugin/raw/main/libs/mf/tutorial/result.png)

[\>> 开始教学](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md)

## 页:1

请看看这个 [关于模块联合会的文章系列](https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/)。 。 。 .

## 实例

这个 [实例](https://github.com/manfredsteyer/module-federation-plugin-example) 将微前端装入外壳 :

请看看这个例子 **读取我**它指出使用模块联合会的重要方面.

## 高级特性

虽然上述教程和博客文章指导您使用模块联合会,但本节提醒您注意这个插件和模块联合会的一般一些高级方面.

### 动态模块联合会

自1.2版以来,我们提供了帮助器功能,使动态模块联合会变得非常容易. 用我们的 `loadRemoteModule` 函数而不是动态 `include`例如,加上懒惰路线:

```typescript
import { loadRemoteModule } from '@angular-architects/module-federation';

[...]
const routes: Routes = [
    [...]
    {
        path: 'flights',
        loadChildren: () =>
            loadRemoteModule({
                type: 'module',
                remoteEntry: 'http://localhost:3000/remoteEntry.js',
                exposedModule: './Module'
            })
            .then(m => m.FlightsModule)
    },
    [...]
]
```

如果可能的话,装入 `remoteEntry` 领先 这使得Module Federation在商谈共享库的版本时可以考虑远程元数据.

为此,你可以打电话 `loadRemoteEntry` 在拖住角前 :

```typescript
// main.ts
import { loadRemoteEntry } from '@angular-architects/module-federation';

Promise.all([
  loadRemoteEntry({
    type: 'module',
    remoteEntry: 'http://localhost:3000/remoteEntry.js',
  }),
])
  .catch((err) => console.error('Error loading remote entries', err))
  .then(() => import('./bootstrap'))
  .catch((err) => console.error(err));
```

这个 `bootstrap.ts` 文件包含通常在 `main.ts` 因此,它呼吁 `platform.bootstrapModule(AppModule)`。您真的需要将前置文件调用载荷 Remote Entry 和动态导入的组合起来,并装入另一个拖曳Angular 的文件,因为Angular本身在版本谈判期间已经是一个受尊重的共享库.

然后,在装入远程模块时,你会提到 `remoteEntry` 属性,因为它也作为远程的内部标识符:

```typescript
import { loadRemoteModule } from '@angular-architects/module-federation';

[...]
const routes: Routes = [
    [...]
    {
        path: 'flights',
        loadChildren: () =>
            loadRemoteModule({
                type: 'module',
                remoteEntry: 'http://localhost:3000/remoteEntry.js',
                exposedModule: './Module'
            })
            .then(m => m.FlightsModule)
    },
    [...]
]
```

### 分享 Monorepo 的 Libs

假设你有一个角CLI Monorepo 或 Nx Monorepo 使用路径映射 `tsconfig.json` 用于提供图书馆:

```json
"shared-lib": [
  "projects/shared-lib/src/public-api.ts",
],
```

您现在可以在您的单重播中共享您所有微前端的库( apps) 。 这意味着这个库只装入一次.

#### 14+版本中新的精简配置

从第14版开始,我们使用一个更蒸汽的配置,当使用上面提到的 -- -- 类型开关时,有以下一个选项: `remote`, (中文(简体) ), `host`, (中文(简体) ), `dynamic-host`。 。 。 .

这个新配置会自动分享所有本地解放者. 因此,你不需要做任何事情.

然而,如果想要控制,可以使用本地图书馆共享哪些图书馆 `sharedMappings` 数组 :

```javascript
module.exports = withModuleFederationPlugin({
  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
    }),
  },

  sharedMappings: ['shared-lib'],
});
```

请不要忘记,分享模块联盟 总是一个选择: 您需要添加此设置到每个共享的微前端 .

#### 遗产-语法和版本 12-13

在以前的版本中,您将 lib 名称与 `SharedMappings` 在您的网络包配置中的实例 :

```javascript
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");

[...]

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json'),
  ['auth-lib']
);
```

从1.2版本开始,使用锅炉板 `SharedMappings` 是为您生成的。 你只需要在这里加上你的lib的名字.

这个生成的代码包括提供这些库的元数据 `ModuleFederationPlugin` 并添加一个插件,确保即使是由Angular编译器生成的源代码也使用共享的库版本.

```javascript
plugins: [
    new ModuleFederationPlugin({
        [...]
        shared: {
            [...]
            ...sharedMappings.getDescriptors()
        }
    }),
    sharedMappings.getPlugin(),
],
```

### 共享帮助

帮助函数共享为共享依赖添加了一些附加选项 :

```typescript
shared: share({
    "@angular/common": {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
        includeSecondaries: true
    },
    [...]
})
```

新增选项是: `requireVersion: 'auto'` 财务报告和审定财务报表 `includeSecondaries`。 。 。 .

#### 需要Version: “自动”

如果你准备好了 `requireVersion` 改为 `'auto'`,帮助者选择您定义的版本 `package.json`。 。 。 .

这有助于解决没有(完全)满足同行依赖和次级切入点的问题(见下文的坑部分).

默认,它需要 `package.json` 最接近呼叫者(通常为: `webpack.config.js`) (中文(简体) ). 不过,你可以把路传给别人 `package.json` 使用第二个可选参数。 您还需要在您所在的节点依赖中定义共享的 libray `package.json`。 。 。 .

您可以跳过此选项并调用 `setInferVersion(true)` 在此之前:

```typescript
setInferVersion(true);
```

#### 包括二级

如果设置为 `true`,所有二级切入点也都加入。 就 `@angular/common` 这也是 `@angular/common/http`, (中文(简体) ), `@angular/common/http/testing`, (中文(简体) ), `@angular/common/testing`, (中文(简体) ), `@angular/common/http/upgrade`,以及 `@angular/common/locales`。这一详尽清单表明,使用这一选项是为了 `@angular/common` 这不是个好主意 因为通常你不需要他们.

> 自第14.3版以来, `includeSecondaries` 默认为真实.

然而,这个选项可以帮助快速实验,或者如果你想快速共享一个像 `@angular/material` 有很多次要的切入点.

即使你分享太多,模块联盟只会在运行时装入需要的. 然而,请记住,共享的包不能被树震动.

要跳过一些次要切入点,您可以指定一个配置选项,而不是 `true`数字 :

```typescript
shared: share({
    "@angular/common": {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
        includeSecondaries: {
            skip: ['@angular/common/http/testing']
        }
    },
    [...]
})
```

#### 全部共享

这个 `shareAll` 帮助者共享您定义的所有依赖关系 `package.json`编辑 `package.json` 如上所述:

```typescript
shared: {
  ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto'
  }),
  ...sharedMappings.getDescriptors()
}
```

用于共享的选项 `package.json`。 。 。 .

这在单回波场景中可能有用,在做一些实验/麻烦射击时也会有用.

#### 耳机和平板电脑

> 谢谢 [迈克尔·埃格-齐克斯](https://twitter.com/MikeZks),谁想出了这些解决方案.

Module Federation允许将共享的依赖直接捆绑入您的应用程序捆绑. 因此,你不需要加载额外的捆绑每个共享依赖。 当存在许多共享的依赖性时,这可能会对提高应用程序的启动性能产生兴趣.

改进启动时间的一种可能用途是设定 `eager` 改为 `true` **刚刚** 为宿主. 以后装入的遥控器可以重新使用这些急切的依赖性,尽管它们已经通过宿主的捆绑(如: `main.js`) (中文(简体) ). 这最有效,如果主机总是拥有最高的兼容版本共享依赖. 还有,在这种情况下,你不需要在前面装入远程入口.

虽然 `eager` 旗帜是模块联邦自其诞生之初就提供的框外特性,我们需要调整Angular CLI使用的网页包配置一点来避免生成捆绑中的代码重复. 新的 `withModuleFederationPlugin` 用此插件的 第 14 版引入的助手默认这样做 。 配置只是需要设置 渴望 `true`。 。 。 .

```javascript
module.exports = withModuleFederationPlugin({
  shared: {
    ...shareAll({
      singleton: true,
      eager: true,
      pinned: true,
      strictVersion: true,
      requiredVersion: 'auto',
    }),
  },
});
```

如上一个例子所示,我们还增加了另一个财产:被钉住。 这样可以确定,共享的依赖性被放入应用程序的(例如主机的)捆绑中,尽管没有在那里使用. 这可以预先装入以后需要但随后通过一捆装入的微前端的依赖性.

### Nx 整合

如果插件检测到您正在使用 Nx( 它基本上寻找一个) `nx.json`),它使用由Nx提供的构建器.

### Angular Universal (服务员侧面渲染)

自此插件的12.4.0版本起,我们支持新的 _日记_\-基于服务器侧面渲染(SSR)的Angular Universal API. 请注意安全部门改革 _仅限_ 在特定情况下是有意义的,例如,针对需要SEO的客户软件.

为了利用安保部门改革,应使安保部门改革能够 **全部** 您的联邦项目(例如外壳和微前端).

#### 在添加模块联合会之前添加角通用

如果您从新项目开始, 在添加模块联合会之前, 应当添加 Angular Universal:

```
ng add @nguniversal/common --project yourProject
ng add @angular-architects/module-federation --project yourProject
```

然后,调整生成的端口 `server.ts`数字 :

```typescript
const PORT = 5000;
```

在此之后,您可以编译和运行您的应用程序 :

```
ng build yourProject && ng run yourProject:server
node dist/yourProject/server/main.js
```

#### 在现有模块联合会项目中增加角通用

如果您已经使用 `@angular-architects/module-federation`,可以这样添加Angular Universal:

1.  更新 `@angular-architects/module-federation` 改为最新版本(qq 12.4).
    
    ```
    npm i @angular-architects/module-federation@latest
    ```
    
2.  现在,我们需要暂时禁用同步的靴子。 虽然模组联合会需要它,但由Angular Universal提供的示意图假设Angular被以传统(同步)方式被拖出. 在使用这些Schematics后,我们必须再次启用同步的靴子夹:
    
    ```
    ng g @angular-architects/module-federation:boot-async false --project yourProject
    
    ng add @nguniversal/common --project yourProject
    
    ng g @angular-architects/module-federation:boot-async true --project yourProject
    ```
    
3.  模组联合会和Angular Universal这两个组织现在都到位了,我们可以将它们相互结合:
    
    ```
    ng g @angular-architects/module-federation:nguniversal --project yourProject
    ```
    
4.  在生成时调整已使用的端口 `server.ts` 文件 :
    
    ```typescript
    const PORT = 5000;
    ```
    
5.  现在,您可以编译和运行您的应用程序 :
    
    ```
    ng build yourProject && ng run yourProject:server
    node dist/yourProject/server/main.js
    ```
    

#### 示例

请找到一个 [实例](https://github.com/manfredsteyer/module-federation-plugin-example/tree/ssr) 在树枝里 `ssr`。 。 。 .

#### 试试看

试试看,你可以去检查一下 `main` 我们的分支 [实例](https://github.com/manfredsteyer/module-federation-plugin-example)。在安装依赖之后(`npm i`),您可以重复将Angular Universal添加到以上两次描述的现有模块联合会项目的步骤: 一次给 _项目外壳和端口 5000_ 再来一次 _工程 mfe1和端口 3000_。 。 。 .

请找到一个 [脑垃圾堆](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/braindump-ssr.md) 这个 [这里](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/braindump-ssr.md)。 。 。 .

### 共享 Monorepo 库时的陷阱

#### 语法已失效( 例如 ng 加上 @ angular/ material 或 @ angular/ pwa)

为使模块联合会发挥作用,我们需要同步拖住应用程序。 因此,我们需要把靴子圈的逻辑 转移到一个新的 `bootstrap.ts` ,然后通过动态导入在 `main.ts`。这是使用模块联合会时的典型模式。 动态导入使模块联盟可以加载共享的 libs.

然而,一些示意图(如:. `ng add @angular/material` 或者说 `@angular/pwa`假设靴子绑住直接发生在 `main.ts`基于这个原因,有一个图表, 帮助你打开 同步的靴子夹住和关闭:

```
ng g @angular-architects/module-federation:boot-async false --project yourProject

ng add your-libraries-of-chioce --project yourProject

ng g @angular-architects/module-federation:boot-async true --project yourProject
```

#### 警告:没有指定所需的版本

如果你得到警告的话 _未指定所需的版本, 无法自动确定一个_,Module Federation 需要一些帮助来发现共享库的版本以便使用. 原因与同伴依赖关系或使用二级切入点不同 `@angular/common/http`。 。 。 .

为避免此警告, 您可以用手指定所使用的版本 :

```typescript
shared: {
    "@angular/common": {
        singleton: true,
        strictVersion: true,
        requireVersion: '12.0.0'
    },
    [...]
},
```

你也可以使用我们的 `share` 帮助从您的版本中推断版本编号 `package.json` 设置时 `requireVersion` 改为 `'auto'`数字 :

```typescript
shared: share({
    "@angular/common": {
        singleton: true,
        strictVersion: true,
        requireVersion: 'auto'
    },
    [...]
})
```

#### 未导出组件

如果使用共享组件而不通过您的库管导出(`index.ts` 或者说 `public-api.ts`),您在运行时得到以下错误:

```
core.js:4610 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined
TypeError: Cannot read property 'ɵcmp' of undefined
    at getComponentDef (core.js:1821)
```

## 角培训、讲习班和咨询

-   [角培训和讲习班](https://www.angulararchitects.io/en/angular-workshops/)
-   [角质咨询](https://www.angulararchitects.io/en/consulting/)

## 常见问题

### @angular-architects/module-federation 是什么？

与Angular CLI无缝地使用Webpack模块联合会\.

### 如何安装 @angular-architects/module-federation？

在项目目录运行 npm install @angular-architects/module-federation，或使用 pnpm add / yarn add / bun add。

### @angular-architects/module-federation 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @angular-architects/module-federation 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @angular-architects/module-federation 可以商用吗？

@angular-architects/module-federation 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @angular-architects/module-federation 的下载量有多少？

根据 npm 官方下载统计，@angular-architects/module-federation 在 2026/10/06 – 2026/11/04 这 30 天内被下载 519,257 次，日均约 17,309 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @angular-architects/module-federation 还在维护吗？

最新版本 22\.0\.0 发布于 2026/09/11（1 个月前）；至今共发布 103 个版本，其中过去 12 个月发布了 6 个；首次发布于 2020/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。