Debugging Angular applications effectively can significantly enhance productivity and streamline development. In this post, we’ll explore how to set up and troubleshoot Angular debugging in Visual Studio Code (VS Code) on Windows 10. We’ll cover setting up launch.json and tasks.json configurations.

  • .vscode
    • launch.json
    • tasks.json

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Start & Launch Edge",
      "type": "msedge",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}\\ClientApp",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    },
    {
      "name": "Launch Edge",
      "type": "msedge",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}\\ClientApp",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm start",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "options": {
        "cwd": "${workspaceFolder}/ClientApp"
      },
      "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."
          }
        }
      }
    }
  ]
}