时间戳

首页 > 解决方案 > 通过设置 angular.json sourceMap 属性调试，Angular 7 生产构建项目

angular - 通过设置 angular.json sourceMap 属性调试，Angular 7 生产构建项目

问题描述

我需要在浏览器开发人员工具中调试/跟踪由 Angular 版本 7 编写并在服务器上部署/发布的前端源代码。

我找到了一些解决方案，例如在 angular.json 中设置一些配置，但它们都不起作用。

角.json

"sourceMap": true

or 

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

但不起作用。

我需要在 Google Chrom 开发人员工具的 Sources 选项卡中设置类似 webpack:// 文件夹来放置断点，并且可以跟踪源代码（Typescript），但在已经发布在服务器 IIS 上的生产模式下。

非常感谢！

标签： angulardebuggingbuildproduction

解决方案

@Nanotron，Angular 项目版本 7 已与 .Net core2.1 API 项目集成，使用 VS 2019，所以我通过 VS 发布功能发布/部署了项目，并且我已经在 package.json 中设置了构建命令，例如这个，

包.json

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot --base-href /ProjectName/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

所以我认为你的意思是，我必须像这样修改这个内置命令

"build":"ng build --prod --aot --base-href /ProjectName/ --source-map=true"

而不是修改，angular.json 文件属性 "sourceMap":true in

"production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }

好提示！我会尝试并分享结果！非常感谢！

推荐阅读