Angular 5 HttpClient仅在-prod模式下报ERROR TypeError: Assignment to constant variable

这种prod构建下API调用失败的情况我碰过好多次，大概率是生产环境的代码压缩/优化环节出了问题，给你几个逐步排查的思路：

1. 先确认环境配置是否正确 #

• 生产环境默认加载的是environment.prod.ts，先检查这个文件里的API基础URL是不是和开发环境的environment.ts一致，有没有写错域名、端口或者路径——很多人都会在这里犯低级错误，比如开发用localhost:3000，prod忘了改或者改串了。
• 最快的验证方式：prod构建后打开浏览器控制台的Network标签，看失败的API请求的实际URL是什么，是不是和你预期的一致。

2. 排查Uglify/Tree Shaking导致的代码被误删 #

• 有时候Uglify或者Tree Shaking会把它判定为“无用”的代码删掉，比如你的API服务类、HTTP拦截器，甚至是RxJS的操作符（比如catchError、map）。
• 可以先做几个测试定位：
  • 在tsconfig.json里把compilerOptions的noUnusedLocals和noUnusedParameters设为false，关闭未使用代码的检查，重新prod构建看是否恢复正常。
  • 如果你用了RxJS，确保操作符是通过import { catchError } from 'rxjs/operators';这种方式按需导入，而不是全局导入，避免被Tree Shaking误删。
  • 在angular.json的build配置里暂时关闭优化："optimization": false，如果此时API调用正常，那肯定是优化环节的问题，再逐个开启优化项定位具体是哪个插件搞的鬼。

3. 检查HTTP拦截器和错误处理逻辑 #

• 生产环境代码压缩后，变量名会被混淆，如果你自定义的HTTP拦截器里用到了依赖变量名的逻辑（比如instanceof判断、反射相关操作），很可能会失效。
• 可以先移除所有自定义的HTTP拦截器，重新prod构建测试，如果API调用正常，再逐个加回来排查哪个拦截器有问题。
• 另外，检查你的错误处理逻辑，是不是prod环境下错误被吞了导致看不到报错——可以在API调用的catchError里强制加console.error(err)，看控制台有没有具体的错误信息输出。

4. 验证后端的生产环境访问限制 #

• 虽然你说连接的是同一后端，但有些后端会根据请求的Origin、请求头或者环境标识来限制访问。比如本地prod构建时，浏览器的Origin还是localhost，但后端可能对prod环境的请求有特殊校验。
• 查看Network标签里失败请求的Response或者Error信息，有没有CORS相关报错，或者后端返回了401/403/500这类状态码，这些信息能快速帮你定位后端层面的问题。

5. 自定义Webpack配置的排查（如果有的话） #

• 如果你修改过Webpack配置，比如调整了Uglify的参数，可能是压缩时的某些选项导致的。比如mangle: true会混淆类名、函数名，如果你的代码刚好依赖这些名称（比如某些序列化/反序列化逻辑），就会出问题。
• 可以尝试在Uglify配置里添加mangle: { keep_fnames: true }，保留函数和类的名称，再重新构建测试。

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