Angular库通过npm安装时自动复制asset文件到项目assets目录的实现方案

该需求完全可以实现，但不推荐使用npm安装阶段自动修改宿主项目文件的方案，这类自动写入操作存在覆盖宿主项目现有资源、适配不同项目结构失败、触发权限报错等大量不可控风险，Angular生态有官方支持的更稳定的实现方式。

无需开发自动复制逻辑，仅需做好库的资源打包配置，再给接入方提供简单的构建配置指引即可：

• 你在打包发布Angular库时，确保所有静态资源都被包含在npm包产物中，建议统一存放在库产物根目录的assets文件夹下
• 接入方仅需修改项目angular.json中对应构建配置的assets数组，新增如下规则：

{
  "glob": "**/*",
  "input": "./node_modules/<你的库实际名称>/assets",
  "output": "/assets/"
}

• 配置完成后，Angular执行ng build或ng serve时，会自动将你库内的assets资源合并到最终构建产物的assets目录下，和宿主项目自有资源共存，全程由Angular官方构建链路处理，不会出现资源冲突、路径适配失效等问题。

如果你的业务场景必须要求安装后自动复制资源，可以通过npm的postinstall钩子实现，但需要做好大量兼容处理：

• 在你的库的package.json中新增脚本配置："postinstall": "node ./copy-assets.js"
• 自行实现copy-assets.js脚本，核心逻辑需要包含：
  • 向上遍历目录定位宿主项目根目录，判断依据为存在angular.json文件
  • 读取angular.json获取用户自定义的assets目录路径，不要硬编码src/assets避免适配失败
  • 资源复制前校验目标路径是否已存在同名资源，存在则跳过并在控制台输出提示
  • 全局捕获脚本异常，避免脚本执行失败导致用户整个npm包安装流程中断

注意：该方案兼容性极差，不同Angular版本、不同项目结构、pnpm/yarn/npm不同包管理器的node_modules目录结构都可能导致脚本失效，非特殊场景不建议使用。

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