技術(shù)在我們傳統(tǒng)生活方式的每一步都圍繞著我們。這些技術(shù)環(huán)境隨著時間的推移而發(fā)展。每天都有新的技術(shù)進(jìn)步席卷整個行業(yè)。為適應(yīng)技術(shù)革命，企業(yè)主選擇了微服務(wù)方式。但是，前端一直懸而未決，微前端作為一個福音出現(xiàn)了。這篇博文圍繞 Angular 微前端及其優(yōu)勢展開。此外，它還涵蓋了微前端架構(gòu)角度及其實現(xiàn)。最后，本博客旨在幫助您確定為什么選擇 Micro Frontend Angular 是您組織成功的關(guān)鍵。

什么是 Angular 微前端？

Angular 微前端指的是一種架構(gòu)模式，涉及將大型 Angular Web 應(yīng)用程序分解為小型、獨立且可部署的微應(yīng)用程序，每個微應(yīng)用程序負(fù)責(zé)處理自己的一組功能。它打算將來自不同技術(shù)和多個域的 Web 應(yīng)用程序合并為單個域下的單個 Web 應(yīng)用程序，盡管技術(shù)堆棧和部署服務(wù)器可能不同，即共享基本 URL。Angular 微前端架構(gòu)背后的目標(biāo)是通過降低 Web 應(yīng)用程序的復(fù)雜性和促進(jìn)模塊化來增強可擴展性、靈活性和可維護(hù)性。

對 Angular 微前端架構(gòu)的需求

如今，每個企業(yè)主都希望整合種類繁多的服務(wù)，并在一個地方交付所有內(nèi)容以滿足用戶的需求，這導(dǎo)致應(yīng)用程序的大小增加，因為添加了大量的功能、模塊和頁面，這給多個應(yīng)用程序帶來了挑戰(zhàn)。多個開發(fā)人員團(tuán)隊在一個項目上工作，因為可能會出現(xiàn)多個實例，其中需要多個團(tuán)隊來處理單個模塊、頁面或功能。

在這種情況下，對Angular Micro Frontends的需求成為一項強制要求，因為當(dāng)多個團(tuán)隊或開發(fā)人員開始在同一頁面上工作時，他們可能會覆蓋彼此的更改，或者在提交代碼和延遲發(fā)布過程時可能會面臨沖突，而且重新測試的多個實例是需要確保在發(fā)布時應(yīng)用程序中沒有錯誤代碼。

對于一個簡單的解決方案，為了避免這種情況，每個團(tuán)隊或開發(fā)人員可以為他們的模塊/子域創(chuàng)建他們的 repo 并獨立工作，而不必?fù)?dān)心其他開發(fā)人員的更改或提交更改，并且每當(dāng)模塊的路由被激活時，新的更改將出現(xiàn)在頁面上。因此，所有開發(fā)人員都可以避免從目標(biāo)分支/合并沖突和其他分支中定期拉取的任務(wù)。Angular 微前端架構(gòu)為開發(fā)人員和產(chǎn)品所有者帶來了各種好處，例如：

• 可以同時使用多個技術(shù)棧

• 易于添加/更新/刪除代碼

• 沒有代碼共享

• 單頁應(yīng)用程序或 SPA 看起來很像

• 更輕松的應(yīng)用程序維護(hù)

• 改進(jìn)的代碼組織

• 簡化的開發(fā)過程

• 高效調(diào)試

• 更好的團(tuán)隊協(xié)調(diào)

• 增強的靈活性

所有 Angular 應(yīng)用程序都需要 Angular 微前端方法嗎？

許多企業(yè)主想知道是否所有應(yīng)用程序都需要微前端 Angular 方法來開發(fā)他們的 Web 應(yīng)用程序。出色地！這個問題的答案很簡單：NO！這種方法只推薦用于大型和復(fù)雜的應(yīng)用程序開發(fā)實例，其中模塊和頁面相互依賴，不同的開發(fā)人員團(tuán)隊很難同時開發(fā)同一個應(yīng)用程序。對于涉及幾個模塊/頁面且不復(fù)雜的較小且不復(fù)雜的應(yīng)用程序，傳統(tǒng)方法是最可行的解決方案。

Angular 微前端架構(gòu)與傳統(tǒng)架構(gòu)有何不同

為了更好地理解微前端架構(gòu)與傳統(tǒng)架構(gòu)的不同之處，讓我們舉幾個例子：

資料庫

在傳統(tǒng)架構(gòu)中，應(yīng)用程序的所有代碼/模塊/頁面/功能都保存/提交在一個存儲庫中，而在 Angular 微前端架構(gòu)中，不需要將所有代碼/模塊/頁面/功能保存在同一個存儲庫中。

技術(shù)

在傳統(tǒng)架構(gòu)中，所有代碼/模塊/頁面/功能大多共享相同的技術(shù)，即 Angular/PHP/JAVA/C# 等。但對于微前端架構(gòu)，這不再需要，即第 1 頁可以是 Angular， Page 2 代碼可以是C#等。

當(dāng) Application 變大時，應(yīng)用程序的初始加載時間也會增加，'Waiting' 場景不會給最終用戶留下好印象。

準(zhǔn)備好接受 Angular Micro 前端的強大功能了嗎？
從我們這里聘請 Angular 開發(fā)人員來創(chuàng)建比以往任何時候都更快、更具可擴展性和更用戶友好的前端應(yīng)用程序。

微前端 Angular 架構(gòu)的實現(xiàn)方式

實現(xiàn)微前端架構(gòu)的方法有很多種，以下是最常見的方法：

框架

• iframe 用于加載嵌套/獨立網(wǎng)頁以及父網(wǎng)頁。

• 它是一個 HTML 元素，通過在標(biāo)簽中指定所需的 URL，我們可以加載不同的網(wǎng)頁并實現(xiàn)微前端架構(gòu)

• 由于 Iframe 有其上下文，與父級或其他網(wǎng)頁共享數(shù)據(jù)變得更加困難，所有操作都需要使用全局上下文和對象（即瀏覽器的“窗口”對象）來完成，這使得應(yīng)用程序更容易受到攻擊。

NGINX

• NGINX 是為現(xiàn)代 Web 應(yīng)用程序創(chuàng)建的開源 Web 服務(wù)器，如果所有應(yīng)用程序都在同一臺服務(wù)器上，它可以提供高性能并易于維護(hù)不同應(yīng)用程序的路由。

• 根據(jù)文件中提供的用于匹配路由和登陸頁面的配置，NGINX 處理請求。

• 由于配置文件只是一個文本文件，因此很容易添加/更新和刪除路由和登陸頁面詳細(xì)信息的映射

第三方庫

許多庫都可以實現(xiàn) Angular 微前端架構(gòu)，下面是一些流行的庫：

• 單SPA

• 模塊聯(lián)合

• FrintJS

這個庫不需要改變現(xiàn)有的代碼或邏輯，它需要一些包裝代碼/配置來啟用微前端架構(gòu)。

單 SPA 庫示例：

場景 1：

• 在任何公司中，都存在多個部門，它們都可以在內(nèi)部 Web 應(yīng)用程序上使用，如銷售、人力資源、行政、采購、客戶、IT 等部門，并且根據(jù)員工的角色，用戶只能查看/訪問該特定客戶的來自基于授權(quán)的應(yīng)用程序的功能。

• 所有這些部門每天都需要對應(yīng)用程序進(jìn)行一些更改，即添加新功能和維護(hù)等。

• 處理不同部門職責(zé)的團(tuán)隊/開發(fā)人員在所有其他部門的代碼已經(jīng)存在的共享代碼中添加新功能/解決的錯誤。

• 由于它是共享代碼，因此需要進(jìn)行回歸測試以確保其他部門的功能不受影響，這使得發(fā)布過程太慢。

• 一些功能是通用的，可能會被其他部門使用，例如修剪空間/排序數(shù)據(jù)/共享接口和枚舉，對此的任何微小更改都可能會干擾現(xiàn)有功能。

場景 1 的問題

• 代碼與所有部門共享

• 延遲發(fā)布過程

• 通過僅更改1個部門代碼來發(fā)布所有部門代碼

• 代碼依賴問題

場景 2：

• 所有以上部門明智的子域/單獨的 URL 創(chuàng)建（即 sales.mycompany.com / accounts.mycompany.com / admin.mycompany.com），因此用戶需要登錄到特定部門的應(yīng)用程序，如果用戶想要使用其他部門的應(yīng)用程序，他必須重新登錄其他部門的網(wǎng)址

• 所有這些部門代碼都存在于不同的 Repository 中，因此各個部門的代碼是獨立的。

• 任何一個部門的代碼都需要改動，只有那個代碼需要測試和發(fā)布。

場景 2 的問題：

• 所有部門不共享相同的 URL

• 用戶需要登錄到多個部門

微前端架構(gòu)將如何解決上述問題？

以上所有問題都可以通過實現(xiàn)微前端架構(gòu)來解決，下面是解釋：

• 微前端架構(gòu)將允許我們共享一個公共 URL，因此使用微前端架構(gòu)，URL 看起來像 ie mycompany.com/sales || mycompany.com/accounts ||mycompany.com/admin（與其他單頁應(yīng)用程序非常相似）

• 不再要求所有部門使用相同的編程語言代碼。

• 使用本地存儲或 NgRx，我們可以在所有應(yīng)用程序之間共享 Session 數(shù)據(jù)，因此不需要登錄多個域。

• 哪個部門的代碼需要改動，只需要發(fā)布那些部門的代碼，所以發(fā)布過程很快。

實施 Angular 微前端架構(gòu)的分步指南

從我們上面討論的不同方式來看，我們將使用流行且易于實現(xiàn)的庫“single-spa”。以下是傳統(tǒng)/現(xiàn)有代碼結(jié)構(gòu)，它具有不同的部門代碼，獨立發(fā)布并通過不同的 URL 訪問，即 sales.mycompany.com / accounts.mycompany.com / admin.mycompany.com

要制作微前端架構(gòu)的現(xiàn)有應(yīng)用程序，請按照以下步驟操作：

第 1 步：創(chuàng)建根/包裝應(yīng)用程序

首先，我們需要創(chuàng)建一個新的包裝器/容器應(yīng)用程序。

安裝包：

npm 安裝 create-single-spa <-global>

在存儲庫級別的根目錄下運行帶有選項的以下命令：

創(chuàng)建單個水療中心

在這里，我們正在創(chuàng)建一個包裝器應(yīng)用程序，它將在單個基本 URL 下表示/包裝所有不同的域應(yīng)用程序，在這里我們使用了“single-spa root config”選項，因為項目已經(jīng)存在，我們只需要創(chuàng)建一個包裝器。

注意：此命令還將安裝節(jié)點模塊。

上述命令的輸出將是：

將創(chuàng)建一個“根”文件夾，其中包含一些看起來像配置文件的文件以及常見的 Angular 文件，如 tsconfig、package.json 等。

讓我們簡要了解每個文件：

bacancy-root-config.ts

• 所有需要的應(yīng)用程序都必須在這里注冊以及它們的路徑（與 Angular 模塊的路由器配置文件相同）

• “index.ejs”文件加載這個配置文件。

<% if (islocal) ( %)
 <script type="systemjs importmap">
   {“進(jìn)口”：{"@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js","@bacancy/root-config": "//localhost:9000/bacancy-root-config.js"
      }
    }
  </腳本><% } %>

<正文>
   <無腳本>
     您需要啟用 Javascript 才能運行此應(yīng)用程序。
   </noscript>
  
 <import-map-overrides-full show-when-local-storage="devtools" dev-1ibs</import-nap-overrides-full><script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/6ef749bfa41ab87c136cf605b8aa3b1e.js" data-minify="1" defer></script></body></html>

• 這里需要在“systemjs-importmap”下提及所有應(yīng)用程序的位置以及應(yīng)用程序的簡稱

• 這里已經(jīng)在“//localhost:9000/bacancy-root-config.js”位置定義了“@bacancy/root-config”

• 這樣，將加載“bacancy-root-config”文件并因此注冊所有應(yīng)用程序

索引.ejs

• EJS 代表“嵌入式 JavaScript”。

• 它允許使用自己定義的語法和標(biāo)簽動態(tài)生成 HTML

• 該文件在“webpack.config.js”中使用如下

返回合并（默認(rèn)配置，[
  // 通過添加到這個對象來修改 webpack 配置
  插件：[
   新的 Htmlhebpack 插件（{
     注入：假，
    模板：“src/index.ejs”
   模板參數(shù)：{
     islocal: webpackConfigEnv & webpackConfigEnv.isLocal,
     有機物，
    }
   })
   ]
  })}

微前端布局.html

• 有不同的方式來注冊，加載基于 URL 的應(yīng)用程序，

• 這個文件可以用 HTML 格式來定義路徑和加載路徑的位置（類似于 Angular 應(yīng)用程序的路由器配置）

<路線路徑="設(shè)置">
  <application name="@org/settings"></application></路線>

• 這里在上面的格式中，我們需要添加要加載的路徑和應(yīng)用，根據(jù)主動路徑匹配應(yīng)用才會被加載

• 在這里我們還可以定義默認(rèn)應(yīng)用程序，以防所有路徑都不匹配，即 404/登錄頁面

webpack.config.js
Webpack 是一種工具，用于將應(yīng)用程序代碼與定制一起打包成塊，并將該代碼從服務(wù)器加載到瀏覽器中。

第 2 步：運行 Root / Wrapper 應(yīng)用程序

從“root”目錄執(zhí)行命令“npm start”將啟動 single-spa 的示例應(yīng)用程序，如下所示：

第 3 步：在 Angular 微前端架構(gòu)中添加現(xiàn)有應(yīng)用程序

按照以下步驟為微前端架構(gòu)添加現(xiàn)有應(yīng)用程序：

打開“Admin”應(yīng)用代碼：

通過運行命令安裝包：

>npm i single-spa-angular

>npm i @angular-builders/custom-webpack

將“single-spa-angular”庫添加到您的項目中：

>ng 添加單水療角

由于命令輸出顯示添加了一些文件并更新了一些文件，因此以下是各個更改的詳細(xì)信息：

• 在項目的根級別添加了一個新文件“extra-webpack.config.js”，它是 SPA 的自定義 webpack 配置

• 在 src 目錄中添加了一個新文件“main.single-spa.ts”，該文件將成為應(yīng)用程序的新入口點（main.ts 將被忽略）

• 將在 src 目錄中創(chuàng)建一個組件“empty-route”

• 將在 src/single-spa 下創(chuàng)建一個新文件“asset-url.ts”，用于從動態(tài)位置加載資產(chǎn)

• 將在 src/single-spa 下創(chuàng)建一個新文件“single-spa-props.ts”，用于添加自定義屬性，并在“main.single-spa.ts”中使用

• “package.json”文件將通過添加更新：
  ? devDependencies
  ? dependencies
  ? scripts

• “tsconfig.app.json”文件將通過以下方式更新：

? 添加“src/main.single-spa.ts”并從編譯中刪除“main.ts”文件

• “angular.json”文件將更新為：
  ?對于生產(chǎn)構(gòu)建，應(yīng)用程序構(gòu)建器更改為“@angular-builders/custom-webpack: browser”
  ?對于開發(fā)，應(yīng)用程序構(gòu)建器更改為“@angular-builders/ custom-webpack:dev-server”
  ?入口文件更改為“src/main.single-spa.ts”
  ?添加自定義webpack配置

手動需要在“app-routing.module.ts”中添加“APP_BASE_HREF”，如下所示：

供應(yīng)商：[{provide: APP_BASE_HREF, useValue: '/'},]

就是這樣，在所有需要創(chuàng)建微前端架構(gòu)的現(xiàn)有項目中按照上述步驟進(jìn)行操作。

第 4 步：與 Root / Wrapper 集成

現(xiàn)在我們只需要通過在“systemjs-importmap”部分添加其配置來將所有應(yīng)用程序與 Wrapper 項目集成

<script type="systemjs-importmap?>
  {
    進(jìn)口“：{
    “@bacancy/admin”: "//localhost:4261/main.js",
    “@bacancy/network”: "//localhost:4202/main.js",
    “@bacancy/sales?: "//localhost:4263/main.js",
    “@bacancy/root-config”: "//localhost:986e/bacancy-root-config.
    “@single-spa/welcome?：“https://unpkg.con/single-spa-welcome/dist/single-spa-welcome.js”，
    “single-spa-layout”：“https://unpkg.con/single-spa-layoutgl.e.0-beta.2/dist/systen/single-spa-layout.min.js”
  }
 }</script> 刪除這段注釋掉的代碼。

在這里，我們添加了“@bacancy/admin”、“@bacancy/network”和“@bacancy/sales”配置以及運行應(yīng)用程序的服務(wù)器/端口。

此外，由于我們使用的是 Angular 應(yīng)用程序，因此我們需要啟用 ZoneJs，以便僅取消注釋其腳本標(biāo)簽

<!--如果您需要支持 Angular 應(yīng)用程序，請取消注釋下面的腳本標(biāo)記以確保只加載一個 ZoneJS 實例在 https://single-spa.js.org/docs/ecosysten-angular/#Zonejs 了解更多關(guān)于原因的信息--><腳本源= https://cdn.jsdelivr.net/npm/zone.j56.11.3/dist/zone。分鐘。js"></script>

現(xiàn)在，我們需要將其路由應(yīng)用程序加載到“micro-frontend-layout.html”中，如下所示

<single-spa-router mode="hash"><div class="主要內(nèi)容"><路線路徑<application name="gbacancy/admin"></application></路線><route path="網(wǎng)絡(luò)"><application name="gbacancy/network"></application></路線><路線路徑=“銷售”><application name="gbacancy/sales"></application></路線><路由默認(rèn)值><應(yīng)用程序名稱-"gsingle-spa/welcome"></application></路線></div></single-spa-router>

就是這樣！您的基本微前端架構(gòu)基于 Angular 的應(yīng)用程序已準(zhǔn)備就緒。

第 5 步：運行應(yīng)用程序

• 通過“npm Start”運行根項目。

• 使用“ng s –port 4201”運行管理項目。

• 使用“ng s –port 4202”運行網(wǎng)絡(luò)項目。

• 使用“ng s –port 4203”運行銷售項目。

注意：您還可以在我們的GitHub存儲庫中找到上述解決方案。

結(jié)論

（言鼎科技）