# module-federation-plugin-example

**Repository Path**: mumu-osc/module-federation-plugin-example

## Basic Information

- **Project Name**: module-federation-plugin-example
- **Description**: Angular 微前端实现方法，可以加载来自不同项目中的模块。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-03-25
- **Last Updated**: 2024-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Angular, 微前端, NiceFish, 大漠穷秋

## README

# 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

<img src="./ng-mfe.png">

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

## 部署到 nginx

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

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

## License

MIT