微前端架构下Angular库资源引用失败：图片加载404求助

核心问题：组件引用路径错误 #

你模板里写的ngSrc="libs/layout/src/assets/logo.png"是源码路径，但库构建后，assets会被打包到构建产物的assets目录，不会保留原源码路径，所以浏览器找不到对应文件。

正确的配置与引用方式 #

1. 确认库的build配置
   你第一种project.json的配置是正确的，它会把libs/layout/src/assets下的所有文件复制到库构建产物的assets目录：

   "targets": {
       "build": {
         "options": {
           "assets": [
             {
               "glob": "**/*",
               "input": "libs/layout/src/assets",
               "output": "assets"
             }
           ]
         }
       }
     }
   

   执行库构建命令后，去dist/layout/assets目录检查，确认logo.png是否存在。

2. 修正组件模板的图片引用
   把ngSrc的路径改成构建后的路径，直接写：

   <img
       ngSrc="assets/logo.png"
       height="40"
       width="120"
       alt="Main-Logo"
     />
   

   微前端场景下，要确保宿主应用的静态资源路径能正确映射到库的assets（比如Module Federation场景中，需确保静态资源被正确暴露）。

额外排查点 #

• 若仍出现404，打开浏览器开发者工具的网络面板，查看实际请求的URL，对比构建产物里的文件路径
• 检查库的tsconfig.lib.json是否有影响资源路径的配置
• 微前端场景下，确认宿主应用是否正确引入了库的静态资源（比如webpack配置是否处理了库的assets）

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