Angular：如何从Nx工作区共享库中访问资源文件？

问题背景 #

你的项目结构如下：

/apps
-- my-app
   // ...

/libs
-- shared
   -- assets 
      -- resources
         -- translation.json

共享库已配置别名@my-company/shared，并且在angular.json的shared.architect.build.options中设置了：

"assets": ["./assets"]

但在my-app中使用@my-company/shared/assets/resources/translation.json访问文件时返回404，需要找到正确的HTTP相对路径访问方式。

解决方法 #

1. 理解资源构建逻辑 #

Nx构建共享库时，会把assets目录下的内容打包到库的输出目录（一般是dist/libs/shared），但这些资源不会自动被my-app的构建流程复制到应用的静态资源目录，所以直接用别名访问会报错。

2. 配置应用的资源复制规则 #

修改my-app对应的angular.json配置，把共享库的资源目录添加到应用的assets数组中，这样构建时会将这些资源复制到my-app的输出静态资源目录：

// angular.json 中 projects.my-app.architect.build.options.assets 部分
"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./libs/shared/assets",
    "output": "./assets/shared"
  }
]

这里的output路径可以自定义，比如./assets/shared表示资源会被复制到应用的assets/shared目录下。

3. 使用正确的HTTP路径访问 #

配置完成后，在my-app中就可以通过以下相对路径访问translation.json文件：

/assets/shared/resources/translation.json

额外提示 #

• 如果需要发布共享库给外部项目使用，可以在共享库的package.json中配置assets字段，确保资源文件被包含在发布包内；但对于Nx monorepo内的应用来说，直接配置应用的资源复制是最直接的方案。
• 注意：@my-company/shared是TypeScript模块解析的别名，不能作为静态资源的HTTP访问路径使用，静态资源的访问路径必须对应应用输出目录中的实际位置。

内容的提问来源于stack exchange，提问作者dave0688