Angular生产环境下如何分别生成带/不带SourceMap的优化代码以解决错误堆栈追踪问题

我特别理解你的需求——既要给生产环境部署干净的、不带SourceMap的优化代码，又能在出问题时快速用SourceMap解析原始错误堆栈，还不想用那种事后删.map文件的笨办法（确实容易出错）。你之前尝试分两次构建的思路方向是对的，但遇到哈希不一致的坑，其实是因为Angular底层的Webpack在计算文件哈希时，会把构建配置的差异也算进去，哪怕你用了hidden: true去掉了SourceMap引用，内部构建流程的变化还是会影响最终的哈希值。

给你分享两个最实用的解决方案，优先推荐第一个，省心又靠谱：

方案一：一次构建生成所有文件，只部署非SourceMap文件 #

这是最稳妥的方式，不需要分两次构建，从根源上避免哈希不一致的问题：

• 先修改你的angular.json配置，找到生产环境构建的配置项（architect -> build -> configurations -> production），把sourceMap改成下面这样：

  "sourceMap": {
    "scripts": true,
    "styles": true,
    "hidden": true,
    "vendor": true
  }
  

  这里的hidden: true会让构建出的JS文件里不添加sourceMappingUrl注释，完全符合生产环境的部署要求；同时构建过程会生成对应的.map文件，和JS文件是严格对应的。
• 执行生产构建：ng build --configuration=production，这时候dist目录里会同时有优化后的JS文件和对应的.map文件。
• 部署的时候，只把dist目录里除了.map之外的所有文件上传到生产服务器就行。比如用CI/CD工具的话，加个过滤规则排除.map后缀的文件；如果是手动部署，直接忽略这些.map文件就行。
• 平时把这些.map文件和对应的版本号（或者Git提交哈希）绑定保存好，比如存在本地服务器或者构建归档里。等生产环境出错误时，直接拿出对应版本的.map文件，就能精准解析错误堆栈到原始TypeScript代码了。

方案二：如果一定要分两次构建，如何保证哈希一致？ #

如果你坚持要分“生产部署用”和“调试用”两次构建，那得严格保证两次构建的所有环境和配置完全一致：

• 首先，在angular.json里复制一份生产配置，比如叫production-with-sourcemaps，两个配置除了sourceMap的设置外，其他所有项（比如optimization、outputHashing、fileReplacements等）必须完全一模一样。其中：
  • 生产部署用的配置："sourceMap": false
  • 调试用的配置："sourceMap": { "scripts": true, "styles": true, "hidden": true }
• 每次构建前必须彻底清空构建目录：执行ng clean，确保没有任何上次构建的残留文件。
• 保证两次构建的环境完全一致：Node.js版本、Angular CLI版本、所有依赖包的版本（一定要用lock文件锁定，比如package-lock.json或者yarn.lock）、构建时的环境变量（比如NODE_ENV=production）都不能变。

不过这个方案风险比较高，哪怕有一点点配置或者环境的差异，哈希还是可能不一样，所以真心更推荐方案一。

最后再提醒你两个关键点：

• 绝对不要把.map文件部署到生产环境！因为里面包含了完整的原始TypeScript代码，会泄露源代码，存在安全风险。
• 保存.map文件时一定要和生产版本一一对应，比如每个构建版本都归档对应的.map文件，不然到时候找不到对应版本的文件，还是没法解析堆栈。

备注：内容来源于stack exchange，提问作者oli0060