# @angular-architects/module-federation-tools 中文文档
规范地址：https://npmcn.com/package/%40angular-architects/module-federation-tools/
版本：22\.0\.0
npm 元数据更新时间：2026-09-11T09:45:33.706Z
中文译文更新时间：2026-11-06T04:10:43.494Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40angular-architects/module-federation-tools
原文对照：https://npmcn.com/package/%40angular-architects/module-federation-tools/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：42.7 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2021-05-18T19:39:41.885Z
- 最新版本发布：2026-09-11T09:45:33.528Z
- 近 30 天下载量：83503（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：86（近 12 个月 6 个）
## 中文简介
加进 `@angular-architects/module-federation` 帮助减少锅炉板码.
## 安装
```sh
npm install @angular-architects/module-federation-tools
```
也可以使用：`pnpm add @angular-architects/module-federation-tools`、`yarn add @angular-architects/module-federation-tools`、`bun add @angular-architects/module-federation-tools`
## README
# @angular-architects/模块-federation-tools
加进 `@angular-architects/module-federation` 帮助减少锅炉板码.
目前发行的焦点是将网络组件与模块Federation for **多框架和多版本** 微前端 :
通过汇编和装入这些 **通过模块联合会的网络组件**,我们可以像Angular一样共享库,如果它们使用相同的版本. 否则,模块联合会将在运行时决定为所涉微前端装入专用的 lib 版本:
这可以帮助 **平衡权衡** 介于捆绑大小和微前端隔离之间.
> **免责声明:** 多框架和 -- Version Micro增加了总体复杂性,需要做一些工作。 这个图书馆试图隐藏一些.
## 特征
- ✅ **最小数额** 模块联合会的微前端
- 你不需要额外的元框架 相反,你只是使用你选择的框架,例如:
- 扩展至 [@angular-architects/模块编织](https://www.npmjs.com/package/@angular-architects/module-federation)
## 实例
- [生活实例](https://red-ocean-0fe4c4610.azurestaticapps.net/)
- [源代码 shell](https://github.com/manfredsteyer/multi-framework-version)
- [微前端源代码](https://github.com/manfredsteyer/angular-app1)
- [微小前端的源代码, 带有 Routing](https://github.com/manfredsteyer/angular3-app)
- [Vue 的微前端源代码](https://github.com/manfredsteyer/vue-js)
- [带有反光的微前端源代码](https://github.com/manfredsteyer/react-app)
- [带有 AngularJS 的微前端源代码](https://github.com/manfredsteyer/angularjs-app)
## 教学
请找到我们的 [这里的教程](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md)。 。 。 .
## 提供模块联合会的网络部分
这个帮助包假设微前端作为Web组件被曝光.
### 在 Angular 中将微前端显示为 Web 组件
要在Angular 中做到这一点,请安装 `@angular/elements`数字 :
```bash
npm i @angular/elements
```
然后,您可以直接将您的应用程序组件转换为 Web 组件 :
```typescript
import { createCustomElement } from '@angular/elements';
[...]
@NgModule({
[...]
declarations: [
AppComponent
],
bootstrap: [] // No bootstrap components!
})
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
const ce = createCustomElement(AppComponent, {injector: this.injector});
customElements.define('angular1-element', ce);
}
}
```
### 将 Web 组件与 React 等其他框架一起曝光
如果您的框架不直接支持将您的应用程序暴露为网络组件,则您可以轻松地在它周围写出一个简单的Srapper. 基本上,一个网页组件 -- -- 更精确地说: 自定义元素 -- -- 只是扩展的 EcmaScript 类 `HtmlElement` 登记 `customElements.register`请找到 [以此处反应为例](https://github.com/manfredsteyer/react-app/blob/main/app.js)。 。 。 .
### 通过模块联合会展示基于网络组件的微前端
添加 `@angular-architects/module-federation` 到您的微前端 :
```
ng add @angular-architects/module-federation
```
让你 `webpack.config.js` 揭露整个 `bootstrap.ts` 靴子绑住你 `AppModule`。 。 。 .
```typescript
// webpack.config.js
name: "angular3",
library: { type: "var", name: "angular3" },
filename: "remoteEntry.js",
exposes: {
'./web-components': './src/bootstrap.ts',
},
```
如果拖曳您的应用程序的文件名称不同, 请相应调整这些设置 .
## Angular 帮助工具
为了实现一个多版本/多框架情景的Angular,我们需要一些帮助器功能。 使用它们最简单的方法 就是用我们的靴子扶手 把你的Angular app绑住:
```typescript
// main.ts
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { bootstrap } from '@angular-architects/module-federation-tools';
bootstrap(AppModule, {
production: environment.production,
appType: 'shell',
// appType: 'microfrontend'
});
```
> 使用此靴子陷阱帮助工具 **两者**你的外壳和微型前端!
请确定设置 `appType` 改为 `shell` 用于您的外壳应用程序和 `microfrontend` 为您的微前端.
## 运行到 Web 组件
这个 `WebComponentWrapper` 帮助您引导到网络组件 :
```typescript
export const APP_ROUTES: Routes = [
[...]
{
path: 'angular1',
component: WebComponentWrapper,
data: {
remoteEntry: 'https://nice-grass-018f7d910.azurestaticapps.net/remoteEntry.js',
remoteName: 'angular1',
exposedModule: './web-components',
elementName: 'angular1-element'
} as WebComponentWrapperOptions
},
[...]
}
```
### 重要:角13+
从Angular 13开始,CLI正在排放EcmaScript模块. 因此,我们需要调整WebComponentWrapper在装入已用CLI 13或更高版本创建的遥控器时的用法. 这个,就这个 `type` 改为 `remote` 跳过 `remoteName` 属性( 对于模块, 我们不需要远程Name ):
```typescript
export const APP_ROUTES: Routes = [
[...]
{
path: 'angular1',
component: WebComponentWrapper,
data: {
type: 'module',
remoteEntry: 'https://your-path/remoteEntry.js',
exposedModule: './web-components',
elementName: 'angular1-element'
} as WebComponentWrapperOptions
},
[...]
}
```
## 亚室
如果一个网页组件有它自己的路由器,你可以使用我们的 UrlMatchers `startsWith` 财务报告和审定财务报表 `endsWith` 定义,用于外壳和微前端的URL的哪一部分:
```typescript
// Shell
export const APP_ROUTES: Routes = [
[...]
{
matcher: startsWith('angular3'),
component: WebComponentWrapper,
data: {
remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
remoteName: 'angular3',
exposedModule: './web-components',
elementName: 'angular3-element'
} as WebComponentWrapperOptions
},
[...]
}
```
```typescript
// Micro Frontend
RouterModule.forRoot([
{ path: 'angular3/a', component: AComponent },
{ path: 'angular3/b', component: BComponent },
// To prevent issues when routing to other micro frontends
// a catch-all route should be defined
{ path: '**', component: EmptyComponent },
]);
```
## 通过模块联合会直接装入网络组件
这个 `WebComponentWrapper` 也可作为一个传统组成部分:
```html
```
```typescript
item: WebComponentWrapperOptions = {
remoteEntry: 'https://witty-wave-0a695f710.azurestaticapps.net/remoteEntry.js',
remoteName: 'react',
exposedModule: './web-components',
elementName: 'react-element'
},
```
可选属性 `props` 财务报告和审定财务报表 `events` 允许定义网络组件的属性和事件:
```typescript
props = {
message: 'Hello from Shell',
};
events = {
clicked: (event) => {
console.debug('clicked!', event);
},
};
```
```html
```
## 其它细节
> 在多版本的微前端策略中,必须只将区.js捆绑到窗口对象上一次. 另外,还需要确保只有一例ngZone被所有微前端使用.
如果你分享的话 `@angular/core` 并且因此还有一个对浏览器Platform的技术引用,它被不止一个微缩的frondend所使用,Angular的默认设置是,每个共享版本只支持一个平台实例. 记住你 **需求** 用于在不同的版本中创建多平台实例,但如果该版本是相同的,则 `@angular/core` 不共享,而是直接被打包入到微前端的捆绑中(就像Angular默认的w/o模块联邦方式).
自然,这些技术细节很难进入。 因此 `bootstrap()` 本软件包的功能有助于执行您的多版本战略w/o,即需要单独执行这些低层次方面.
提供了一些可选的旗帜,为自定义行为提供选项 `bootstrap()` 函数 :
- `ngZoneSharing: false`: 取消窗口对象中ngZone共享(未推荐):
```typescript
bootstrap(AppModule, {
production: environment.production,
ngZoneSharing: false, // defaults to true
});
```
- `platformSharing: false`: 取消窗口对象中平台共享(未推荐):
```typescript
bootstrap(AppModule, {
production: environment.production,
platformSharing: false, // defaults to true
});
```
- 可能,如果依赖性不共享,或者每个被靴子拖走的远程app使用不同的版本.
- `activeLegacyMode: false`: 取消为平台共享提供倒向相容性的后传模式:
```typescript
bootstrap(AppModule, {
production: environment.production,
activeLegacyMode: false, // defaults to true
});
```
- 如果您的微前端全部使用 `@angular-architects/module-federation-tools` 版本中 `^12.6.0`, (中文(简体) ), `^13.1.0` 或者任何更新的主要版本,你可以手动关闭遗留模式.
- 这些版本介绍了如何在窗口对象中共享平台的新功能.
- 这允许使用 `bootstrap()` 函数,即使在这种情况下,同一版本被打入不同的微前端捆绑.
## 更多关于基本想法
请进一步了解这方面的基本想法 [博客文章](https://www.angulararchitects.io/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly)。 。 。 .
## 常见问题
### @angular-architects/module-federation-tools 是什么？
加进 @angular-architects/module-federation 帮助减少锅炉板码\.
### 如何安装 @angular-architects/module-federation-tools？
在项目目录运行 npm install @angular-architects/module-federation-tools，或使用 pnpm add / yarn add / bun add。
### @angular-architects/module-federation-tools 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @angular-architects/module-federation-tools 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @angular-architects/module-federation-tools 可以商用吗？
@angular-architects/module-federation-tools 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @angular-architects/module-federation-tools 的下载量有多少？
根据 npm 官方下载统计，@angular-architects/module-federation-tools 在 2026/10/06 – 2026/11/04 这 30 天内被下载 83,503 次，日均约 2,783 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @angular-architects/module-federation-tools 还在维护吗？
最新版本 22\.0\.0 发布于 2026/09/11（1 个月前）；至今共发布 86 个版本，其中过去 12 个月发布了 6 个；首次发布于 2021/05/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。