如何在 Angular 和 Nx monorepo 上使用 Module Federation 托管資產

Question

我需要使來自 Angular 遠程應用程序的資產（png、svg 圖像、字體）在 Webpack 模塊聯合會的主機應用程序中也可用。

以下是重現的長步驟 - 如果您知道解決方案，則無需閱讀：)

---

先決條件：

• Nx 單體倉庫工作區。 - 通過以下步驟創建： https://nx.dev/guides/setup-mfe-with-angular
• libs/shared/ assets - 一個只有兩個圖像的共享庫。 這是可選的，解決方案可以沒有這個共享庫（直接將資產登錄）。
• apps/ login - 使用資產庫的遠程應用程序
• apps/ dashboard - 主機應用程序，使用登錄應用程序
• 從儀表板和登錄應用程序我有資產的符號鏈接 - 這也可以刪除。
• 實際代碼托管在這里： https://github.com/Kichrum/module-federation-demo （ so-question分支，帶符號鏈接的克隆： git clone -c core.symlinks=true https://github.com/Kichrum/module-federation-demo.git ）。
• 運行： npm i && npm start

預期結果：

在 http://localhost:4200（主機）和 http://localhost:4201/（遠程）上，我們有 4 張圖片可見。 構建應用程序時（ npm run build ），兩個應用程序都有資產（可以托管在 CDN 上）。

我試過玩 package.json、webpack.config.json - 沒有幫助（也許做錯了什么）。

現在，我有一個解決方案：將所有資產托管在單獨的 CDN 上的某個位置，在源代碼中寫入絕對 URL，但隨后我必須保持 CDN 和代碼同步——這看起來不是一個長期的解決方案。

UPD：避免在 CSS 中使用相對路徑“修復”了問題： url('^assets/img.png')或url('/assets/img.png') 。 開發和生產構建工作良好，但解決方案並不完美，因為：

1. IDE 強調了無效的路徑（在項目根目錄中找不到 /assets）- 將/assets文件夾移動到與apps/相同的級別修復它；
2. 文件名未使用哈希碼進行擴展以實現更好的緩存；
3. Nx 和 Angular 13 CLI 緩存機制有時會“忘記”更新資產，因此在構建沒有標志--skip-nx-cache時我會錯過新資產。

這三點都是可控的，但它們是技術債務的“症狀”，所以我希望社區有更好的解決方案，至少沒有符號鏈接。

Answer 1

您可以將資產存儲在登錄應用程序中： apps/login/src/assets 。 然后在儀表板應用程序的project.json中添加以構建配置下一行：

"assets": [
  ...,
  {
    "glob": "**/*",
    "input": "apps/login/src/assets",
    "output": "assets"
  }
],