Angular部署后lottie-player脚本404，咨询其他脚本添加方式

我来帮你搞定这个问题——你遇到的404是因为部署时lottie-player.js.map文件没有被正确打包或放置到服务器对应的路径上。下面给你几个解决思路，同时也提供其他更适配Angular的Lottie Player引入方式：

方案1：修复现有脚本配置，处理Source Map #

你的angular.json已经把lottie-player的脚本加入了，但Angular默认不会自动复制对应的.map文件到dist目录。可以手动把这个map文件加入assets配置，让build时自动复制：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/assets/i18n",
  {
    "glob": "lottie-player.js.map",
    "input": "./node_modules/@lottiefiles/lottie-player/dist",
    "output": "./"
  }
]

这样部署后，服务器就能找到这个map文件了。

另外，如果你在生产环境不需要source map（毕竟它主要用于调试），可以直接关闭source map生成，从根源避免这个问题：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 保留你原有的其他配置
    "sourceMap": {
      "scripts": false,
      "styles": false,
      "vendor": false
    }
  }
}

方案2：用ES模块方式引入（更推荐） #

比起直接在scripts里加UMD脚本，这种方式更符合Angular的模块化开发规范，也能彻底避免路径问题：

1. 在你的根模块（比如app.module.ts）或者需要用到Lottie的组件里导入：

import '@lottiefiles/lottie-player';

2. 同时在angular.json的styles数组里加入对应的样式文件（如果需要Lottie的默认样式）：

"styles": [
  "src/styles.scss",
  "./node_modules/@lottiefiles/lottie-player/dist/lottie-player.css"
]

这种方式下，Angular的打包工具会自动处理所有依赖和资源，部署时不会再出现找不到文件的情况，维护起来也更方便。

方案3：改用CDN引入脚本 #

如果不想依赖本地的node_modules资源，也可以直接在src/index.html里引入CDN版本的脚本：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

这种方式不需要配置angular.json，但要确保用户的网络能访问对应的CDN，适合对资源加载灵活性要求高的场景。

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