如何在prod服务器上调试Angular？

Question

在开发环境中，我可以使用Chrome源标签进行调试，但在prod服务器中，我在运行ng build --prod后使用dist文件夹内容。此文件夹包含已编译的代码，因此如果生产中存在问题，我不知道如何调试以找到问题。

是否可以通过生产编译代码进行调试？

Answer 1

您可以尝试ng build --prod --sourcemaps

Answer 2

在 Angular CLI 6 中，选项似乎已更改为

ng build --prod --source-map

否则，您可以通过在生产配置中设置sourceMap：true来启用angular.json中的源地图

"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              **"sourceMap": false,**
                 --------

Answer 3

调试生产版本而不显示源映射可以轻松完成。

您只需要将源地图从本地或远程服务器附加到生产版本即可。

方法和概念：

1. 构建不带源映射的应用以进行生产部署

   ng构建YOURAPP --prod

2. 将生产版本部署到您的Web服务器

3. 这次再次使用sourcemaps选项构建应用程序

   ng构建YOURAPP --prod --sourceMap

4. 使用浏览器的F12开发工具将本地开发环境中的源地图附加到生产版本中

然后像往常一样调试。 这样，您甚至可以从远程设备引用源地图。例如，如果您要在移动设备（例如chrome android）上检查网络应用， 对于检测应用程序特定于平台的行为非常有用。

最好的是，您的源映射不必在公共服务器上公开。它们始终在您的开发环境中保持安全。

Answer 4

如果要在测试服务器上进行部署，则不要使用--prod，因此，如果出现错误，它将显示完整的错误详细信息，但您的应用程序将在开发模式下运行