在 Visual Studio Code 中调试 Angular 13 不起作用，未绑定断点

Question

我正在 .Net Core 和 Angular 13 中开发一个应用程序。
我从 dotnet Angular 模板（dotnet new Angular）开始，然后更新了项目。
我正在尝试在 Visual Studio Code 中为 Angular 应用程序设置调试。
问题是调试开始但断点始终未绑定。

我已经尝试了 StackOverflow 中类似帖子中的所有解决方案以及网络上的许多解决方案，但始终没有成功。

希望有人有一些建议。

我的环境：

文件夹

angular.json

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "TcPortingJiraToERPWeb": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": false,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "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
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "development"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "TcPortingJiraToERPWeb:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "TcPortingJiraToERPWeb:build:production"
            },
            "development": {
              "browserTarget": "TcPortingJiraToERPWeb:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "TcPortingJiraToERPWeb:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "development": {
              "browserTarget": "TcPortingJiraToERPWeb:build:development",
              "serverTarget": "TcPortingJiraToERPWeb:server:development"
            },
            "production": {
              "browserTarget": "TcPortingJiraToERPWeb:build:production",
              "serverTarget": "TcPortingJiraToERPWeb:server:production"
            }
          },
          "defaultConfiguration": "development"
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "TcPortingJiraToERPWeb:build:production",
              "serverTarget": "TcPortingJiraToERPWeb:server:production"
            },
            "development": {
              "browserTarget": "TcPortingJiraToERPWeb:build:development",
              "serverTarget": "TcPortingJiraToERPWeb:server:development"
            }
          },
          "defaultConfiguration": "production"
        }
      }
    },
    "TcPortingJiraToERPWeb-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "TcPortingJiraToERPWeb:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "TcPortingJiraToERPWeb"
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/ClientApp",
            "sourceMaps": true,
            "resolveSourceMapLocations": [
                "${workspaceFolder}/ClientApp/",
                "!/node_modules/**"
            ],
        },
        {
            // Use IntelliSense to find out which attributes exist for C# debugging
            // Use hover for the description of the existing attributes
            // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceFolder}/bin/Debug/net6.0/TcPortingJiraToERPWeb.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach"
        }
    ]
}

package.json

{
  "name": "tcportingjiratoerpweb",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng build && ng run TcPortingJiraToERPWeb:server",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run TcPortingJiraToERPWeb:serve-ssr",
    "serve:ssr": "node dist-server/main.js",
    "prerender": "ng run TcPortingJiraToERPWeb:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "13.2.6",
    "@angular/common": "13.2.6",
    "@angular/compiler": "13.2.6",
    "@angular/core": "13.2.6",
    "@angular/forms": "13.2.6",
    "@angular/localize": "13.2.6",
    "@angular/platform-browser": "13.2.6",
    "@angular/platform-browser-dynamic": "13.2.6",
    "@angular/platform-server": "13.2.6",
    "@angular/router": "13.2.6",
    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
    "@nguniversal/express-engine": "^13.0.2",
    "@popperjs/core": "^2.10.2",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.8.1",
    "core-js": "^3.21.1",
    "express": "^4.15.2",
    "ngx-toastr": "^14.2.2",
    "node-sass": "^7.0.1",
    "oidc-client": "^1.11.5",
    "protractor": "~7.0.0",
    "rxjs": "^7.5.4",
    "ts-node": "~10.7.0",
    "zone.js": "0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.2.6",
    "@angular/cli": "13.2.6",
    "@angular/compiler-cli": "13.2.6",
    "@angular/language-service": "13.2.6",
    "@nguniversal/builders": "13.0.2",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.10.3",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "~17.0.21",
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "codelyzer": "^6.0.2",
    "eslint": "^8.10.0",
    "ini": "^2.0.0",
    "jasmine-core": "~4.0.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "typescript": "4.5.5"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
  },
}

Answer 1

将项目端口配置检查到 launchSettings.json 文件 (Properties/launchSettings.json)，然后准备 tasks.json 文件（在 .vscode 文件夹下）：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "dotnet build debug",
            "type": "shell",
            "command": "dotnet",
            "args": [ 
                "build", "${workspaceRoot}",
                "-c", "Debug"
            ],
            "problemMatcher": "$msCompile"
        },
    ]
}

然后创建您的launch.json 文件（位于 .vscode 文件夹下），使用 launchSettings.json 中配置文件中的端口配置（右侧配置文件与项目名称相同）：

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": ".NET Core Launch (web debug)",
          "type": "coreclr",
          "request": "launch",
          "preLaunchTask": "dotnet build debug",
          // If you have changed target frameworks, make sure to update the program path.
          "program": "${workspaceFolder}/bin/Debug/net6.0/HealthCheck.dll",
          "args": [],
          "cwd": "${workspaceFolder}",
          "stopAtEntry": false,
          "internalConsoleOptions": "openOnSessionStart",
          "env": {
              "ASPNETCORE_ENVIRONMENT": "Development"
          },
          "launchBrowser": {
            "enabled": false,
            "args": "${auto-detect-url}",
            "windows": {
              "command": "cmd.exe",
              "args": "/C start https://localhost:7231"
            },
            "osx": {
              "command": "open"
            },
            "linux": {
              "command": "xdg-open"
            }
          }
      },
      {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "https://localhost:7231",
        "webRoot": "${workspaceFolder}/ClientApp"
      }
  ],
  "compounds": [
      {
          "name": "Debug .net core-angular",
          "configurations": [".NET Core Launch (web debug)","Launch Chrome against localhost"]
      }
  ]
}

在此示例中，我使用了 launchSettings.json 中的端口配置。

接下来进入“调试”部分并运行“Debug .net core-angular”。

Answer 2

我使用的是 VS 2022 Pro，而不是 VS Code，并且遇到了同样的问题。

我刚刚解决了进入：
工具>选项>调试>常规

并启用两者：

• 为 ASP.NET（Chrome、Edge 和 IE）启用 JavaScript 调试
• 启用使用多目标 JavaScript 调试器在 ASP.NET 项目中调试 JavaScript

希望 VS Code 为您提供类似的选项。