0Pricing
Angular Academy · 课时

加载远程模块

动态加载远程微前端

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

在运行时引入远程部分

远程部分公开模块且主机知道其 URL 后，主机就可以使用 loadRemoteModule 按需加载它。这是一次通过 HTTP 执行的动态导入：远程部分的任何内容都不会被打包进主机构建版本。

loadRemoteModule API

loadRemoteModule 接收远程名称（来自清单）和公开键（来自远程部分的 exposes）。它会返回一个包含该模块的承诺。

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

延迟加载远程路由

最清晰的模式是让每个远程部分公开一个路由文件，然后在主机路由器中使用 loadChildren 延迟加载它，这样只有在访问对应路由时才会加载远程部分。

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

加载单个组件

您也可以公开并加载单个独立组件，适合嵌入一个小部件，而不是整个路由区域。

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

在远程端公开内容

为了让主机加载它，远程部分必须在其 exposes 映射中列出该导出内容。该键就是主机传递给 loadRemoteModule 的值。

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

动态解析清单

由于主机会在启动时读取清单，因此您可以按环境（开发、预发布、生产）替换远程 URL，而无需重新构建主机，只需发布不同的清单文件即可。

处理加载失败

远程部分通过网络加载，可能会发生失败（例如离线或正在部署）。请为加载过程添加错误处理，避免单个损坏的远程部分导致整个外壳崩溃。

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

跨边界传递数据

主机与远程部分之间通过共享单例服务或路由器通信，而不是直接导入。共享的身份验证服务（单例）可以让远程部分读取由主机设置的当前用户。

版本与契约

公开键（例如 ./Routes）及其结构共同构成契约。更改导出结构可能会破坏加载它的主机，因此应将公开模块视为公共 API，并谨慎进行版本管理。

预加载策略

您可以在应用空闲后主动预加载远程部分，使之后的导航立即完成，同时保持初始加载轻量。这是在启动速度和用户感知的导航速度之间取得平衡。

端到端流程

回顾一下运行时路径：宿主读取清单，用户导航到联邦路由，loadRemoteModule 获取远程端的 remoteEntry.json，共享的单例会被复用，远程端的路由或组件则会在宿主外壳内渲染。

快速检查

宿主如何延迟加载远程功能？

回顾

宿主在运行时通过 loadRemoteModule(name, key) 加载远程端，通常会在延迟路由的 loadChildren/loadComponent 中使用。远程端必须 expose 该键；清单会根据环境解析 URL。请妥善处理加载失败，通过共享单例进行通信，并将暴露的模块视为带版本的契约。

常见问题解答

「加载远程模块」课时是免费的吗？

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

「加载远程模块」这节课中我会学到什么？

动态加载远程微前端 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

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

「加载远程模块」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 微前端架构
  2. Angular 原生联邦
  3. 共享依赖项
  4. 加载远程模块
← 返回 Angular Academy