Angular 微前端实现方法 - Angular Micro Frontends

说明

• 此项目仅用于向中文开发者演示 Angular 微前端实现方法，所有权全部归属于原作者。This project is only used to demonstrate the Angular micro-frontend implementation method to Chinese developers, and all ownership belongs to the original author.
• 此项目要求 Angular 和 @angular/cli 的版本>=14 ，老版本的项目需要先升级 @angular/cli 到 v14 以上。
• 基于 @angular-architects/module-federation 工具模块实现。
• 在原有的例子基础上，修改了一些代码，增加了部署到 nginx 的说明和配置文件示例。

英文原版相关资料参见：

• @angular-architects/module-federation 的 npm 包：https://www.npmjs.com/package/@angular-architects/module-federation
• 英文原版说明文章：https://dev.to/seanperkins/angular-dynamic-modules-at-runtime-with-module-federation-mk5
• @angular-architects/module-federation 工具模块的 github repo：https://github.com/angular-architects/module-federation-plugin

用法

请在终端中执行：

git clone https://gitee.com/mumu-osc/module-federation-plugin-example.git
cd module-federation-plugin-example
nrm use taobao
npm install
npm run start:shell
npm run start:mfe1

• 壳子项目 shell 运行在 8090 端口。
• 被集成的子项目 mfe1 运行在 8091 端口。
• 核心的配置文件在两个子项目的 webpack.config.js 中。

部署到 nginx

1. npm run build 构建2个工程
2. 请参考 nginx-8090.conf 和 nginx-8091.conf 中的配置，将 shell 和 mfe1 两个项目打包之后的静态资源部署到不同的 nginx 实例上（注意：关键点是两份配置配置文件中都开启了允许跨域。）
3. 启动2台 nginx 实例
4. 分别访问两台 nginx 上部署的应用，可以看到两个应用都正常运行， shell 应用可以加载来自于 mfe1 应用的组件，效果与上一副图片相同。

到这里为止，就实现了 Angular 项目的微前端化了，各个项目工程可以独立访问，也可以加载来自于其它项目的模块。

License

MIT