Angular Academy · 课时

Angular 原生联邦

Q: 「Angular 原生联邦」这节课中我会学到什么？

在 Angular 中配置模块联邦 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在 Angular 中配置模块联邦

Angular 原生联邦 是 CoddyKit 上的免费 Angular Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

为什么使用 Native Federation

经典 Module Federation 与 webpack 紧密绑定。Angular 的构建系统转向了 esbuild，因此社区创建了 Native Federation：一种与构建工具无关、基于 Web 标准（导入映射和 ES 模块）实现相同理念的方案。

软件包

用于 Angular 的 Native Federation 位于 @angular-architects/native-federation 中。请使用 Angular CLI 原理图添加它，原理图会配置好相关设置和构建流程。

ng add @angular-architects/native-federation

初始化主机

在外壳应用上运行原理图，并选择 dynamic-host。它会生成 federation.config.js，并更新启动流程，以便在 Angular 启动前初始化联邦。

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

初始化远程部分

对于功能应用，请使用 remote 运行相同的初始化命令。这会创建配置，将远程部分的部分内容公开给主机。

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

federation.config.js

此配置是联邦的核心：它命名远程部分，列出其 exposes，并声明 shared 依赖。

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

启动流程变更

Native Federation 要求在启动前完成初始化，以便导入映射已经就绪。原理图会将 main.ts 拆分为初始化步骤，由该步骤加载 bootstrap.ts。

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

在主机中列出远程部分

主机会维护一个清单，将远程名称映射到其 remoteEntry.json URL，这样它就知道运行时应从哪里获取每个远程部分。

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

加载清单

将清单路径传递给 initFederation。主机会在启动时读取一次清单，之后即可按需加载其中列出的任意远程部分。

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

基于标准，而非锁定于 webpack

由于 Native Federation 使用原生 ES 模块和导入映射，因此可以与 esbuild、Vite 或其他打包工具配合使用。这种解耦正是它成为现代 Angular 推荐方案的原因。

每个远程部分使用独立的开发服务器

开发期间，每个远程部分都运行在自己的端口上（ng serve --port 4201）。主机通过清单指向这些 URL，因此您可以在本地运行完整的组合应用。

Native Federation 带来的能力

简而言之：独立构建、共享单例（一个 Angular 实例）、动态加载远程部分，以及不依赖特定打包工具。接下来的课程将详细介绍共享依赖和加载远程模块。

快速检查

在 Angular 中，为什么选择 Native Federation，而不是经典的 Module Federation？

回顾

Native Federation（@angular-architects/native-federation）通过导入映射，将模块联邦引入基于 esbuild 的 Angular。使用原理图初始化主机和远程部分，在 federation.config.js 中配置 exposes 和 shared，在启动前调用 initFederation，并在清单中列出远程部分。

常见问题解答

「Angular 原生联邦」课时是免费的吗？

是的 — 「Angular 原生联邦」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「Angular 原生联邦」这节课中我会学到什么？

在 Angular 中配置模块联邦你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Angular 原生联邦」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy