如何在生产模式下调试部署到Heroku的Angular 2 TypeScript应用？

好问题！Angular默认的生产构建为了优化性能、减小包体积，会自动关闭source maps生成，同时做代码混淆、压缩等操作，这就是你看不到.ts文件、没法添加断点的核心原因。不过我们可以调整构建配置，在保持生产模式的同时保留调试所需的原始文件映射，具体步骤如下：

1. 修改angular.json的生产构建配置 #

找到项目根目录下的angular.json文件，定位到projects -> [你的项目名称] -> architect -> build -> configurations -> production节点，调整sourceMap相关配置：

方式一：开启完整source maps（适合临时调试阶段） #

直接将sourceMap设置为true，这样构建时会生成完整的source map文件，浏览器能自动关联到原始.ts文件：

"production": {
  "sourceMap": true,
  // 保留其他原有生产配置（比如aot、optimization等）
}

方式二：生成隐藏式source maps（适合正式环境调试，兼顾安全性） #

如果不想让普通用户通过浏览器看到原始.ts文件，但自己调试时能手动加载，可以用更细粒度的配置：

"production": {
  "sourceMap": {
    "scripts": true,
    "styles": true,
    "hidden": true, // 不会在打包后的JS文件中添加source map引用注释
    "vendor": false
  },
  // 保留其他原有生产配置
}

这种配置下，source map文件会被生成但不会主动暴露，只有你手动在Chrome DevTools中关联本地源码才能加载，更适合需要调试正式环境但不想泄露源码的场景。

2. 重新构建并部署到Heroku #

修改配置后，重新执行生产构建命令：

ng build --prod

确保Heroku的构建流程使用的是更新后的命令——通常Heroku会读取package.json中scripts里的build脚本，如果你的build字段是ng build --prod，直接推送代码到Heroku即可自动完成重新部署。

3. 在Chrome DevTools中调试 #

部署完成后打开你的Heroku应用，进入Chrome DevTools的Sources面板：

• 如果用的是完整source maps：你会看到webpack://文件夹，里面就是你的原始.ts文件，直接点击文件就能添加断点调试。
• 如果用的是隐藏式source maps：右键Sources面板空白处，选择Add folder to workspace，导入本地项目的源码文件夹，再将线上的JS文件手动映射到本地对应的.ts文件，就能用本地代码调试线上环境了。

注意事项 #

• 开启source maps会增加构建产物的体积，调试完成后建议关闭，或用隐藏式配置平衡调试需求和生产环境性能。
• 无论哪种配置，Angular的生产模式仍然会启用AOT编译、树摇等核心优化，不会影响生产环境的运行性能。

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