在 VSCode 中运行的 Angular 调试会话中未命中断点

Question

简短摘要： 从 VSCode 启动我的 Angular 应用程序的调试会话时，根本不会遇到断点。我确实从运行和调试概述中的“调用堆栈”视图中获得了初始设置，但它似乎只是在我的断点上运行。

我的设置/版本： 这是我正在使用的当前设置：

• Angular CLI：12.2.7
• 节点：17.0.1（不支持）
• 包管理器：npm 8.1.0
• ng-packagr 12.2.2
• 打字稿 4.3.5

launch.json

"version": "0.2.0",
"configurations": [
  {
    "name": "ng serve",
    "type": "chrome",
    "request": "launch",
    "preLaunchTask": "npm: start",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}/projects/projectA-demo/src",
    "sourceMapPathOverrides": {
      "webpack:/*": "${webRoot}/*",
      "/./*": "${webRoot}/*",
      "/src/*": "${webRoot}/*",
      "/*": "*",
      "/./~/*": "${webRoot}/node_modules/*",
      "webpack:///ng://projectA/lib/*": "${workspaceFolder}/projects/projectA/src/lib/*"
    }
  }

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    },
  ]
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "projectA": {
      "projectType": "library",
      "root": "projects/projectA",
      "sourceRoot": "projects/projectA/src",
      "prefix": "ng",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/projectA/tsconfig.lib.json",
            "project": "projects/projectA/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/projectA/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/projectA/src/test.ts",
            "tsConfig": "projects/projectA/tsconfig.spec.json",
            "karmaConfig": "projects/projectA/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/projectA/tsconfig.lib.json",
              "projects/projectA/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "projectA-demo": {
      "projectType": "application",
      "schematics": {},
      "root": "projects/projectA-demo",
      "sourceRoot": "projects/projectA-demo/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/projectA-demo",
            "index": "projects/projectA-demo/src/index.html",
            "main": "projects/projectA-demo/src/main.ts",
            "polyfills": "projects/projectA-demo/src/polyfills.ts",
            "tsConfig": "projects/projectA-demo/tsconfig.app.json",
            "aot": true,
            "assets": [
              "projects/projectA-demo/src/favicon.ico",
              "projects/projectA-demo/src/assets"
            ],
            "styles": [
              "projects/projectA-demo/src/styles.css",
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
            ],
            "scripts": [{
              "input": "projects/projectA/node_modules/plain-draggable/plain-draggable.min.js",
              "inject": true,
              "bundleName": "plain-draggable"
            },
            {
              "input": "projects/projectA/node_modules/leader-line/leader-line.min.js",
              "inject": true,
              "bundleName": "leader-line"
            }]
          },
          "configurations": {
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/projectA-demo/src/environments/environment.ts",
                  "with": "projects/projectA-demo/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "projectA-demo:build",
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            }
          },
          "configurations": {
            "production": {
              "browserTarget": "projectA-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "projectA-demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/projectA-demo/src/test.ts",
            "polyfills": "projects/projectA-demo/src/polyfills.ts",
            "tsConfig": "projects/projectA-demo/tsconfig.spec.json",
            "karmaConfig": "projects/projectA-demo/karma.conf.js",
            "assets": [
              "projects/projectA-demo/src/favicon.ico",
              "projects/projectA-demo/src/assets"
            ],
            "styles": [
              "projects/projectA-demo/src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/projectA-demo/tsconfig.app.json",
              "projects/projectA-demo/tsconfig.spec.json",
              "projects/projectA-demo/e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/projectA-demo/e2e/protractor.conf.js",
            "devServerTarget": "projectA-demo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "projectA-demo:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "projectA"
}

如果您需要任何其他信息，请告诉我。谢谢！

Answer 1

我在 Webstorm 中使用节点 v17.2.0 时遇到了同样的问题。降级到v16.13.1 解决了这个问题。

角度：13.1.0

Answer 2

您应该从VSCode Debug Recipes 页面尝试最新的launch.json 和tasks.json 文件示例：

• https://github.com/microsoft/vscode-recipes/tree/main/Angular-CLI