Angular 12中如何打包并发布库的资源文件？

步骤1：修正ng-package.json的Assets配置 #

你的ng-package.json中assets路径指向可能存在偏差，库的资源文件夹通常位于src目录下，需要明确指定输入输出路径，确保打包时资源被正确复制：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/pje-gateway-componentes",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    {
      "input": "./src/assets",
      "output": "assets"
    }
  ]
}

• input：库中资源的实际存放位置（假设你的图片在projects/my-lib/src/assets目录下）
• output：打包后资源在dist目录中的输出位置，最终会生成dist/pje-gateway-componentes/assets文件夹

步骤2：组件中正确引用图片路径 #

在库组件的模板中使用相对路径引用图片，避免绝对路径导致的解析错误。例如：

• 组件文件路径：projects/my-lib/src/lib/my-image-component/my-image-component.component.ts
• 图片路径：projects/my-lib/src/assets/images/demo.png

模板中引用代码：

<img src="../assets/images/demo.png" alt="Demo Image">

这种相对路径在打包后会自动映射到dist目录的assets文件夹，确保消费应用能正确加载资源。

步骤3：验证打包结果 #

执行库打包命令：

ng build my-lib

检查dist/pje-gateway-componentes目录，确认assets文件夹已生成且包含所有图片资源。

步骤4：消费应用配置（无需手动复制图片） #

在消费应用的angular.json中添加资源映射配置，让应用构建时自动从库的node_modules目录复制资源，无需手动存放图片到消费应用：

"projects": {
  "your-consumer-app": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets",
            {
              "glob": "**/*",
              "input": "./node_modules/pje-gateway-componentes/assets",
              "output": "./assets/"
            }
          ]
        }
      }
    }
  }
}

额外注意事项 #

• 无需在public-api.ts中导出图片资源，仅导出组件即可
• 全程避免使用base64编码或硬编码绝对路径，保持资源的可维护性

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