Angular Module Federation Plugin 教程

Angular Module Federation Plugin 教程

module-federation-plugin项目地址:https://gitcode.com/gh_mirrors/mo/module-federation-plugin

一、项目目录结构及介绍

本节将概述Angular Module Federation Plugin项目的目录布局及其主要组件的功能。

主要目录结构:

• src: 应用的主要源代码存放处。
  • app: 包含应用的核心组件和服务。
  • assets: 静态资源文件如图片、字体等。
  • environments: 不同环境（开发、生产）的配置文件。
• projects: 如果项目包括多个库或子项目，它们将放在这里。
• node_modules: 安装的npm依赖包。
• angular.json: Angular配置文件，定义构建和开发服务器选项。
• tsconfig.json: TypeScript编译器配置。
• module-federation.config.js: 重点介绍的配置文件，用于设置Module Federation特性。
• .gitignore, package.json, README.md: 标准的Git、项目元数据和项目说明文件。

目录结构简介：

• src: 开发活动的中心，其中main.ts是应用启动点。
• module-federation.config.js: 控制Module Federation如何进行微前端集成的关键配置。

二、项目的启动文件介绍

main.ts

在Angular应用中，main.ts是应用程序的入口点。对于使用Module Federation的项目来说，它不仅负责初始化应用程序，还可能通过动态导入的方式引入远程应用或共享模块。虽然直接修改可能不多，但了解其作为启动流程起点的角色至关重要。配置中的变化可能会间接影响到此文件执行时的行为，尤其是在涉及远程加载的应用场景中。

三、项目的配置文件介绍

module-federation.config.js

核心配置点：

该文件是使用Module Federation plugin的关键所在。它允许您定义如何共享模块以及哪些应用可以作为远程加载的应用程序。基本结构通常包含以下部分：

• shared: 指定哪些模块应该被其他应用程序共享。

{
  shared: {
    ... // 列出共享模块，例如 '@angular/core', '@angular/common' 等
  }
}

• remotes: 当项目作为容器项目时，这里定义了远程模块的名字和位置。

{
  remotes: {
    appRemote1: 'http://localhost:4201/__webpack_hmr',
    // 更多远程应用配置...
  }
}

• exports: 定义这个应用将会对外提供的模块或服务。

{
  exports: [
    { module: './dist/my-feature', name: 'MyFeatureModule' },
    // 其他对外导出的模块
  ]
}

angular.json

尽管不是专属于Module Federation的内容，但在配置开发服务器时（特别是端口号），angular.json对确保正确的本地环境设置也很重要，特别是在处理多个相互作用的微前端应用时。

通过这样的配置，开发者能够实现模块间的高效共享和远程加载，从而支持复杂的微前端架构。

---

以上内容构成了使用Angular Module Federation Plugin的基本框架解析。深入理解这些组件有助于掌握微前端在Angular生态系统中的实施策略。

module-federation-plugin项目地址:https://gitcode.com/gh_mirrors/mo/module-federation-plugin