Visual Studio 2019（不是 VS Code）打字稿调试断点未绑定

Question

我错过了什么.....

我使用 Visual Studio 2019 在 .Net 5 项目中托管了一个 Angular 12 项目（这是一个较旧的应用程序，我正在尝试快速升级版本 - 我知道这可能不是理想的设置）。

我正在尝试通过在 Visual Studio 中设置断点来调试我的 Angular（打字稿）组件，但我遇到了“断点未绑定”问题并且它没有被命中。我了解关于将打字稿文件转换为用于托管的 javascript 文件的工作原理，但是，我曾经能够在我的打字稿文件中的 Visual Studio 中设置一个断点，并且它会毫无问题地被击中（带有 .Net2.2 的 Angular 5 )。

我已经用谷歌搜索了很长时间，但似乎无法准确找到我需要做的事情 - 可能是 tsconfig.json 设置，或者可能是我正在使用我的“ng build”命令进行生产构建角度应用程序，或者我没有正确的开发设置（我不确定）。

我找到了一些关于如何使用浏览器调试代码的说明，但这并不理想 - 这有点违背了使用优质 IDE 的目的之一。

提前感谢你能给我的任何帮助 - 我要疯了！

我的 tsconfig 文件内容是：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

我的 tsconfig.app.json 文件内容是：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

我的 angular.json 文件设置是：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "inlineTemplate": true,
          "inlineStyle": true,
          "skipTests": true
        },
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:interceptor": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../wwwroot/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "none"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            },
            "development": {
              "browserTarget": "client:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build"
          }
        }
      }
    }
  },
  "defaultProject": "client"
}

Answer 1

试试这些，看看其中一个是否有效。

1)。转到工具 > 选项 > 调试 > 常规 > 选中“为 ASP .NET（Chrome、Edge 和 IE）启用 JavaScript 调试”复选框。 （不知道这是否有效，你可以试试）

2)。确保您在调试时选择了“调试”模式/配置而不是“发布”。

3)。转到您的解决方案/项目文件夹并删除.vs、bin 和obj 文件夹（您可以进行备份），然后重新构建您的项目/解决方案并对其进行调试。

4)。尝试重新启动 Visual Studio，并重置断点。