本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 使用、 AWS Amplify Angular 和 Module Federation 建立微型前端的入口網站
*Milena Godau 和 Pedro Garcia，Amazon Web Services*
## 總結
微型前端架構可讓多個團隊獨立處理前端應用程式的不同部分。每個團隊都可以開發、建置和部署前端的片段，而不會干擾應用程式的其他部分。從最終使用者的角度來看，它似乎是一個單一且具凝聚力的應用程式。不過，他們正在與數個由不同團隊發佈的獨立應用程式互動。
本文件說明如何使用 [AWS Amplify](https://docs.amplify.aws/gen1/angular/)、[角度](https://angular.dev/overview)前端架構和[模組聯合來](https://webpack.js.org/concepts/module-federation/)建立微型前端架構。在此模式中，微型前端在用戶端由 shell （或*父*系） 應用程式組合。shell 應用程式充當擷取、顯示和整合微型前端的容器。shell 應用程式會處理全域路由，這會載入不同的微型前端。[@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) 外掛程式整合 Module Federation 與 Angular。您可以使用 部署 shell 應用程式和微型前端 AWS Amplify。最終使用者透過 Web 入口網站存取應用程式。
入口網站會垂直分割。這表示微型前端是整個檢視或檢視群組，而不是相同檢視的一部分。因此，殼層應用程式一次只會載入一個微型前端。
微型前端會實作為遠端模組。shell 應用程式會延遲載入這些遠端模組，將微前端初始化延遲到需要為止。此方法透過僅載入必要的模組來最佳化應用程式效能。這可減少初始載入時間，並改善整體使用者體驗。此外，您可以透過 webpack 組態檔案 (**webpack.config.js**) 跨模組共用常見的相依性。此實務可提升程式碼重複使用、減少重複，並簡化綁定程序。
## 先決條件和限制
**先決條件**
+ 作用中 AWS 帳戶
+ Node.js 和 npm，[已安裝](https://nodejs.org/en/download/)
+ Amplify CLI，[已安裝](https://docs.amplify.aws/gen1/angular/tools/cli/)
+ 角 CLI，[已安裝](https://angular.io/cli)
+ 使用 [的許可](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) AWS Amplify
+ 熟悉角度
**產品版本**
+ 角度 CLI 13.1.2 版或更新版本
+ @angular-architects/module-federation 14.0.1 版或更新版本
+ Webpack 5.4.0 版或更新版本
+ AWS Amplify 第 1 代
**限制**
微型前端架構是一種強大的方法來建置可擴展性和彈性的 Web 應用程式。不過，在採用此方法之前，請務必了解下列潛在挑戰：
+ **整合** – 其中一個主要挑戰是相較於單體前端，潛在的複雜性增加。協調多個微型前端、處理它們之間的通訊和管理共用相依性可能更為複雜。此外，可能會有與微型前端之間的通訊相關聯的效能額外負荷。此通訊可以增加延遲並降低效能。這需要透過有效的傳訊機制和資料共用策略來解決。
+ **程式碼重複 –** 由於每個微型前端都是獨立開發的，因此存在複製常見功能或共用程式庫程式碼的風險。這可能會增加整體應用程式大小，並帶來維護挑戰。
+ **協調和管理** – 協調跨多個微型前端的開發和部署程序可能具有挑戰性。確保一致的版本控制、管理相依性，以及維護元件之間的相容性在分散式架構中變得更加重要。建立明確的控管、指導方針和自動化測試和部署管道，對於無縫協作和交付至關重要。
+ **測試** – 測試微型前端架構可能比測試單體前端更複雜。它需要額外的工作量和專門的測試策略，以執行跨元件整合測試和end-to-end測試，並驗證多個微型前端的一致使用者體驗。
在承諾微前端方法之前，我們建議您檢閱[了解和實作微前端 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)。
## Architecture
在微型前端架構中，每個團隊都會獨立開發和部署功能。下圖顯示多個 DevOps 團隊如何一起運作。入口網站團隊開發 shell 應用程式。shell 應用程式充當容器。它會擷取、顯示和整合由其他 DevOps 團隊發佈的微型前端應用程式。您可以使用 AWS Amplify 來發佈 shell 應用程式和微型前端應用程式。
架構圖顯示下列工作流程：
1. 入口網站團隊會開發和維護 shell 應用程式。shell 應用程式會協調微型前端的整合和轉譯，以構成整體入口網站。
1. 團隊 A 和 B 開發和維護整合到入口網站的一或多個微型前端或功能。每個團隊可以在各自的微型前端獨立工作。
1. 最終使用者使用 Amazon Cognito 進行身分驗證。
1. 最終使用者存取入口網站，並載入 shell 應用程式。當使用者導覽時，殼層應用程式會處理路由，並擷取請求的微型前端，並載入其套件。
## 工具
**AWS 服務**
+ [AWS Amplify](https://docs.amplify.aws/angular/start/) 是一組專用工具和功能，可協助前端 Web 和行動開發人員快速建置完整堆疊的應用程式 AWS。在此模式中，您可以使用 Amplify CLI 部署 Amplify 微型前端應用程式。
+ [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) 是一種開放原始碼工具，可協助您 AWS 服務 透過命令列 shell 中的命令與 互動。
**其他工具**
+ [@angular-architects/module-federation](https://github.com/angular-architects/module-federation-plugin) 是整合 Angular 與 Module Federation 的外掛程式。
+ [Angular](https://angular.dev/overview) 是一種開放原始碼 Web 應用程式架構，用於建置現代、可擴展且可測試的單一頁面應用程式。它遵循可促進程式碼重複使用和維護的模組化和元件型架構。
+ [Node.js](https://nodejs.org/en/docs/) 是一種事件驅動的 JavaScript 執行期環境，專為建置可擴展的網路應用程式而設計。
+ [npm](https://docs.npmjs.com/about-npm) 是在 Node.js 環境中執行的軟體登錄檔，用於共用或借用套件和管理私有套件的部署。
+ [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) 可協助您將獨立編譯和部署的程式碼載入應用程式，例如微型前端或外掛程式。
**程式碼儲存庫**
此模式的程式碼可在 [Micro-frontend 入口網站中使用 Angular 和 Module Federation](https://github.com/aws-samples/angular-module-federation-mfe) GitHub 儲存庫。此儲存庫包含下列兩個資料夾：
+ `shell-app` 包含 shell 應用程式的程式碼。
+ `feature1-app` 包含範例微型前端。shell 應用程式會擷取此微型前端，並將其顯示為入口網站應用程式中的頁面。
## 最佳實務
微型前端架構提供許多優勢，但也會帶來複雜性。以下是順暢開發、高品質程式碼和良好使用者體驗的一些最佳實務：
+ **規劃和溝通** – 為了簡化協同合作，請投資前期規劃、設計和明確的溝通管道。
+ **設計一致性** – 使用設計系統、樣式指南和元件程式庫，跨微型前端強制執行一致的視覺化樣式。這可提供有凝聚力的使用者體驗並加速開發。
+ **相依性管理** – 由於微型前端獨立發展，請採用標準化合約和版本控制策略，以有效管理相依性並防止相容性問題。
+ **微型前端架構** – 若要啟用獨立開發和部署，每個微型前端都應對封裝功能負有明確且明確的責任。
+ **整合和通訊** – 為了促進順暢整合並將衝突降至最低，請定義微型前端之間的明確合約和通訊協定，包括 APIs、事件和共用資料模型。
+ **測試和品質保證** – 實作微型前端的測試自動化和持續整合管道。這可改善整體品質、減少手動測試工作，並驗證微型前端互動之間的功能。
+ **效能最佳化** –** **持續監控效能指標並追蹤微型前端之間的相依性。這可協助您識別瓶頸並維持最佳應用程式效能。為此使用效能監控和相依性分析工具。
+ **開發人員體驗** – 透過提供清晰的文件、工具和範例，專注於開發人員體驗。這可協助您簡化開發並加入新的團隊成員。
## 史詩
### 建立 shell 應用程式
| 任務 | Description | 所需的技能 |
| --- | --- | --- |
| 建立 shell 應用程式。 | 1. 在角度 CLI 中，輸入下列命令：ng new shell --routing
2. 輸入下列命令以導覽至專案資料夾：cd shell
shell 和微型前端應用程式的資料夾和專案結構可以完全獨立。它們可以做為獨立的 Angular 應用程式處理。 | 應用程式開發人員 |
| 安裝 外掛程式。 | 在 Angular CLI 中，輸入下列命令來安裝 [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) 外掛程式：ng add @angular-architects/module-federation --project shell --port 4200
| 應用程式開發人員 |
| 新增微型前端 URL 做為環境變數。 | 1. 開啟 **environment.ts** 檔案。
2. 將 `mfe1URL: 'http://localhost:5000'`新增至`environment`物件：export const environment = {
production: false,
mfe1URL: 'http://localhost:5000',
};
3. 儲存並關閉 **environment.ts** 檔案。 | 應用程式開發人員 |
| 定義路由。 | 1. 開啟 **app-routing.module.ts** 檔案。
2. 在角度 CLI 中，輸入下列命令，從 @angular-architects/module-federation 外掛程式匯入`loadRemoteModule`模組：import { loadRemoteModule } from '@angular-architects/module-federation';
3. 將預設路由設定為下列項目：{
path: '',
pathMatch: 'full',
redirectTo: 'mfe1'
},
4. 設定微前端的路由：{
path: 'mfe1',
loadChildren: () => loadRemoteModule({
type: 'module',
remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
exposedModule: './Module'
})
.then(m => m.Mfe1Module)
},
5. 儲存並關閉 **app-routing.module.ts** 檔案。 | 應用程式開發人員 |
| 宣告`mfe1`模組。 | 1. 在 `src`資料夾中，建立一個名為 **decl.d.ts **的新檔案。
2. 開啟 **decl.d.ts 檔案。**
3. 將下列項目新增至 檔案：declare module 'mfe1/Module';
4. 儲存並關閉 **decl.d.ts 檔案。** | 應用程式開發人員 |
| 準備微前端的預先載入。 | 預先載入微型前端有助於 Webpack 正確交涉共用程式庫和套件。1. 開啟**main.ts** 檔案。
2. 將內容取代為下列項目：import { loadRemoteEntry } from '@angular-architects/module-federation';
Promise.all([
loadRemoteEntry(`${environment.mfe1URL}/remoteEntry.js`, 'mfe1'),
])
.catch(err => console.error('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));
3. 儲存並關閉 **main.ts** 檔案。 | 應用程式開發人員 |
| 調整 HTML 內容。 | 1. 開啟 **app.component.html** 檔案。
2. 將內容取代為下列項目：Shell application is running!
3. 儲存並關閉** app.component.html** 檔案。 | 應用程式開發人員 |
### 建立微型前端應用程式
| 任務 | Description | 所需的技能 |
| --- | --- | --- |
| 建立微型前端。 | 1. 在角度 CLI 中，輸入下列命令：ng new mfe1 --routing
2. 輸入下列命令以導覽至專案資料夾：cd mfe1
| 應用程式開發人員 |
| 安裝 外掛程式。 | 輸入下列命令來安裝 @angular-architects/module-federation 外掛程式：ng add @angular-architects/module-federation --project mfe1 --port 5000
| 應用程式開發人員 |
| 建立模組和元件。 | 輸入下列命令來建立模組和元件，並將其匯出為遠端項目模組：ng g module mfe1 --routing
ng g c mfe1
| 應用程式開發人員 |
| 設定預設路由路徑。 | 1. 開啟 **mfe-routing.module.ts** 檔案。
2. 將預設路由設定為下列項目：{
path: '',
component: Mfe1Component
},
3. 儲存並關閉 **mfe-routing.module.ts** 檔案。 | 應用程式開發人員 |
| 新增`mfe1`路由。 | 1. 開啟**app-routing.module.ts** 檔案。
2. 將預設路由設定為下列項目：{
path: '',
pathMatch: 'full',
redirectTo: 'mfe1'
},
3. 新增下列`mfe1`路由：{
path: 'mfe1',
loadChildren: () =>
import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
},
4. 儲存並關閉 **app-routing.module.ts** 檔案。 | 應用程式開發人員 |
| 編輯 **webpack.config.js** 檔案。 | 1. 開啟 **webpack.config.js** 檔案。
2. 編輯 `For remotes`區段以符合下列項目：// For remotes (please adjust)
name: "mfe1",
filename: "remoteEntry.js",
exposes: {
'./Module': './src/app/mfe1/mfe1.module.ts',
},
3. 在 `shared`區段中，新增`mfe1`應用程式與 shell 應用程式共用的任何相依性：shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
})
4. 儲存並關閉** webpack.config.js** 檔案。 | 應用程式開發人員 |
| 調整 HTML 內容。 | 1. 開啟 **app.component.html** 檔案。
2. 將內容取代為下列項目：
3. 儲存並關閉** app.component.html** 檔案。 | 應用程式開發人員 |
### 在本機執行應用程式
| 任務 | Description | 所需的技能 |
| --- | --- | --- |
| 執行`mfe1`應用程式。 | 1. 輸入下列命令以啟動`mfe1`應用程式：npm start
2. 在 Web 瀏覽器中，存取 `http://localhost:5000`。
3. 確認微型前端可以獨立執行。`mfe1` 應用程式應該正確轉譯，沒有任何錯誤。 | 應用程式開發人員 |
| 執行 shell 應用程式。 | 1. 輸入下列命令以啟動 shell 應用程式：npm start
2. 在 Web 瀏覽器中，存取 `http://localhost:4200/mfe1`。
3. 確認`mfe1`微型前端內嵌在 shell 應用程式中。入口網站應用程式應該正確轉譯，沒有任何錯誤，而且`mfe1`應用程式應該內嵌在其中。 | 應用程式開發人員 |
### 重構 shell 應用程式以處理微前端載入錯誤
| 任務 | Description | 所需的技能 |
| --- | --- | --- |
| 建立模組和元件。 | 在 shell 應用程式的根資料夾中，輸入下列命令來建立錯誤頁面的模組和元件：ng g module error-page --routing
ng g c error-page
| 應用程式開發人員 |
| 調整 HTML 內容。 | 1. 開啟 **error-page.component.html** 檔案。
2. 將內容取代為下列項目：Sorry, this page is not available.
3. 儲存並關閉 **error-page.component.html** 檔案。 | 應用程式開發人員 |
| 設定預設路由路徑。 | 1. 開啟 **error-page-routing.module.ts** 檔案。
2. 將預設路由設定為下列項目：{
path: '',
component: ErrorPageComponent
},
3. 儲存並關閉 **error-page-routing.module.ts** 檔案。 | 應用程式開發人員 |
| 建立 函數以載入微型前端。 | 1. 開啟 **app-routing.module.ts** 檔案。
2. 建立下列函數：function loadMFE(url: string) {
return loadRemoteModule({
type: 'module',
remoteEntry: `${url}/remoteEntry.js`,
exposedModule: './Module'
})
.then(m => m.Mfe1Module)
.catch(
() => import('./error-page/error-page.module').then(m => m.ErrorPageModule)
);
}
3. 將`mfe1`路由修改為下列項目：{
path: 'mfe1',
loadChildren: () => loadMFE(environment.mfe1URL)
},
4. 儲存並關閉** app-routing.module.ts** 檔案。 | 應用程式開發人員 |
| 測試錯誤處理。 | 1. 如果尚未執行，請輸入下列命令來啟動 shell 應用程式：npm start
2. 在 Web 瀏覽器中，存取 `http://localhost:4200/mfe1`。
3. 確認已轉譯錯誤頁面。您應該會看到下列文字：Sorry, this page is not available.
| 應用程式開發人員 |
### 使用 部署應用程式 AWS Amplify
| 任務 | Description | 所需的技能 |
| --- | --- | --- |
| 部署微型前端。 | 1. 在 Amplify CLI 中，導覽至微型前端應用程式的根資料夾。
2. 輸入下列命令來初始化 Amplify：amplify init
3. 當系統提示您輸入 Amplify 專案的名稱時，請按 **Enter**。這會重複使用 **package.json** 檔案中的名稱。
4. 當系統提示您使用上述組態初始化專案時，請輸入 `Yes`。
5. 當您收到選取身分驗證方法的提示時，請選擇 `AWS Profile`。
6. 選取您要使用的設定檔。
7. 等待 Amplify 初始化專案。當此程序完成時，您會在終端機中收到確認訊息。
8. 輸入下列命令，將 Amplify 託管類別新增至微型前端：amplify add hosting
9. 當您收到選取外掛程式模組的提示時，請選擇 `Hosting with Amplify Console`。
10. 當系統提示您選擇類型時，請選擇 `Manual deployment`。
11. 輸入下列命令來安裝專案 npm 相依性：npm install
12. 輸入下列命令，將應用程式發佈至 Amplify 主控台：amplify publish -y
發佈完成後，Amplify 會傳回微型前端的 URL。
13. 複製 URL。您需要此值才能更新 shell 應用程式。 | 應用程式開發人員、AWS DevOps |
| 部署 shell 應用程式。 | 1. 在 **src/app/environments** 資料夾中，開啟** environment.prod.ts 檔案。**
2. 將`mfe1URL`值取代為已部署微型前端的 URL：export const environment = {
production: true,
mfe1URL: 'https://..amplifyapp.com'
};
3. 儲存並關閉** environment.prod.ts 檔案。**
4. 在 Amplify CLI 中，導覽至 shell 應用程式的根資料夾。
5. 輸入下列命令來初始化 Amplify：amplify init
6. 當系統提示您輸入 Amplify 專案的名稱時，請按 **Enter**。這會重複使用 **package.json** 檔案中的名稱。
7. 當系統提示您使用上述組態初始化專案時，請輸入 `Yes`。
8. 當您收到選取身分驗證方法的提示時，請選擇 `AWS Profile`。
9. 選取您要使用的設定檔。
10. 等待 Amplify 初始化專案。當此程序完成時，您會在終端機中收到確認訊息。
11. 將 Amplify 託管類別新增至 shell 應用程式：amplify add hosting
12. 當您收到選取外掛程式模組的提示時，請選擇 `Hosting with Amplify Console`。
13. 當系統提示您選擇類型時，請選擇 `Manual deployment`。
14. 輸入下列命令來安裝專案 npm 相依性：npm install
15. 輸入下列命令，將 shell 應用程式發佈至 Amplify 主控台：amplify publish -y
發佈完成時，Amplify 會傳回已部署 shell 應用程式的 URL。
16. 請記下 shell 應用程式的 URL。 | 應用程式開發人員、應用程式擁有者 |
| 啟用 CORS。 | 由於 shell 和微型前端應用程式是獨立託管在不同網域上，因此您必須在微型前端上啟用跨來源資源共用 (CORS)。這可讓 shell 應用程式從不同的原始伺服器載入內容。若要啟用 CORS，您可以新增自訂標頭。1. 在 Amplify CLI 中，導覽至微型前端的根資料夾。
2. 輸入以下命令：amplify configure hosting
3. 當系統提示您設定自訂設定時，請輸入 `Y`。
4. 登入 AWS 管理主控台，然後開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。
5. 選擇微型前端。
6. 在導覽窗格中，選擇**託管**，然後選擇**自訂標頭**。
7. 選擇**編輯**。
8. 在**編輯自訂標頭**視窗中，輸入下列內容：customHeaders:
- pattern: '*.js'
headers:
- key: Access-Control-Allow-Origin
value: '*'
- key: Access-Control-Allow-Methods
value: 'GET, OPTIONS'
- key: Access-Control-Allow-Headers
value: '*'
9. 選擇**儲存**。
10. 重新部署微型前端以套用新的自訂標頭。 | 應用程式開發人員、AWS DevOps |
| 在 shell 應用程式中建立重寫規則。 | 角度 shell 應用程式設定為使用 HTML5 路由。如果使用者執行硬重新整理，Amplify 會嘗試從目前的 URL 載入頁面。這會產生 403 錯誤。若要避免這種情況，您可以在 Amplify 主控台中新增重寫規則。
若要建立重寫規則，請遵循下列步驟：1. 在 Amplify CLI 中，導覽至 shell 應用程式的根資料夾。
2. 輸入以下命令：amplify configure hosting
3. 當系統提示您設定自訂設定時，請輸入 `Y`。
4. 開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。
5. 選擇 shell 應用程式。
6. 在導覽窗格中，選擇**託管**，然後選擇**重寫和重新導向**。
7. 在**重寫和重新導向**頁面上，選擇**管理重新導向**。
8. 選擇**開啟文字編輯器**。
9. 在 JSON 編輯器中，輸入下列重新導向：[
{
"source": "/<*>",
"target": "/index.html",
"status": "404-200",
"condition": null
}
]
10. 選擇**儲存**。 | 應用程式開發人員、AWS DevOps |
| 測試 Web 入口網站。 | 1. 在 Web 瀏覽器中，輸入已部署 shell 應用程式的 URL。
2. 驗證 shell 應用程式和微型前端負載是否正確。 | 應用程式開發人員 |
### 清除資源
| 任務 | Description | 所需的技能 |
| --- | --- | --- |
| 刪除應用程式。 | 如果您不再需要 shell 和微型前端應用程式，請將其刪除。這有助於避免您未使用之資源的費用。1. 登入 AWS 管理主控台，然後開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。
2. 選擇微型前端。
3. 在導覽窗格中，選擇**應用程式設定**，然後選擇**一般設定**。
4. 選擇**刪除應用程式**。
5. 在確認視窗中，輸入 `delete`，然後選擇**刪除應用程式**。
6. 重複這些步驟來刪除 shell 應用程式。 | 一般 AWS |
## 疑難排解
| 問題 | 解決方案 |
| --- | --- |
| 執行 `amplify init`命令時沒有可用的 AWS 設定檔 | 如果您沒有設定 AWS 設定檔，您仍然可以繼續執行 `amplify init`命令。不過，當系統提示您輸入身分驗證方法時，您需要選取 `AWS access keys`選項。準備好您的 AWS 存取金鑰和私密金鑰。
或者，您可以為 設定具名設定檔 AWS CLI。如需說明，請參閱 AWS CLI 文件中的[組態和登入資料檔案設定](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html)。 |
| 載入遠端項目時發生錯誤 | 如果您在 Shell 應用程式的 **main.ts** 檔案中載入遠端項目時發生錯誤，請確定已正確設定`environment.mfe1URL`變數。此變數的值應該是微型前端的 URL。 |
| 存取微型前端時發生錯誤 404 | 如果您在嘗試存取本機微型前端時收到 404 錯誤，例如在 `http://localhost:4200/mfe1`，請檢查下列項目：+ 對於 shell 應用程式，請確定 **app-routing.module.ts** 檔案中的路由組態設定正確，並確認`loadRemoteModule`函數已正確呼叫微型前端。
+ 對於微型前端，請確認 **webpack.config.js** 檔案具有正確的`exposes`組態，並確認正確產生 **remoteEntry.js** 檔案。 |
## 其他資訊
**AWS 文件**
+ [了解和實作 上的微型前端 AWS](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)(AWS 方案指引）
+ [Amplify CLI](https://docs.amplify.aws/gen1/angular/tools/cli/) (Amplify 文件）
+ [Amplify 託管](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) (Amplify 文件）
**其他參考**
+ [模組聯合](https://webpack.js.org/concepts/module-federation/)
+ [Node.js](https://nodejs.org/en/)
+ [角度](https://angular.io/)
+ [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)