如何在 Angular 和 Nx monorepo 上使用模块联合托管资产

Question

我需要使来自 Angular 远程应用程序的资源（png、svg 图像、字体）也可以在 Webpack 模块联盟的主机应用程序中使用。

下面是重现的长步骤 - 如果您知道解决方案，则无需阅读:)

前提条件：

Nx monorepo 工作区。 - 按照以下步骤创建：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')

。开发和产品构建工作良好，但解决方案并不完美，因为：

IDE 强调此类路径无效（在项目根目录中找不到 /assets） - 将
```
/assets
```
文件夹移动到与
```
apps/
```
修复它相同的级别；
文件名未使用哈希码扩展以实现更好的缓存；
Nx 和 Angular 13 CLI 有时会使用缓存机制 “忘记”更新资产，所以在构建时没有标志
```
--skip-nx-cache
```
我想念新资产。

所有这三点都是可以管理的，但它们是技术债务的“症状”，所以我希望社区有更好的解决方案，至少没有符号链接。

Answer 1

您也可以使用代理来解决这个问题。

在主机应用程序中创建 proxy.conf 并将资产调用重定向到所需的远程应用程序

{
    "/assets/remote":{
       "target": "http://localhost:4201",
       "secure": false 
    }
}

了解更多信息

Answer 2

您可以将您的资产存储在登录应用程序中：

apps/login/src/assets

。然后在 dashboard 应用程序的 project.json 中添加以下几行构建配置：

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

Answer 3

我们有一个来自 webpack 的变量

__webpack_public_path__

，它在运行时具有加载远程模块的地址。我在这里更详细地描述了该解决方案：https://github.com/module-federation/module-federation-examples/issues/697#issuecomment-1728421106

Answer 4

部署 shell 和远程应用程序后，我遇到了类似的问题。在本地，我们可以单独运行远程应用程序，并且在本地可以解决图像问题。由于我们的 shell 托管来自不同团队的多个远程应用程序，并且完全有不同的存储库。

我找到了一个对我有用的解决方案。

托管环境-nginx

步骤

使用相对于远程的自定义资产重命名资产文件夹例如{remoteapp}-assets 并将其添加到 angular.json 中以包含这些资产。
使用新的资产文件夹更改应用程序图像和静态文件引用的路径。
在 shell 中 -> app.conf 添加 //它将识别请求url的部分是远程资产

位置 ~ /{remoteapp}-assets/{ 重写 ^(.*) ${remotehost}$1; //${remotehost} 或 $remotehost 环境变量，其中远程主机的环境特定 url }

.net apache Web 服务器也有类似的重定向/重写规则。