Angular vscode Debugging Configuration

README.md

Angular vscode Debugging Configuration

Here you'll find the launch.json and tasks.json that you can paste into your .vscode folder of your project.

Don't forget to change values specific to your project like url and webRoot in the launch.json and the options.cwd in the tasks.json file.

After adding these files to your project it should suffice to press F5 to start building and debugging your Angular project.

Have fun!

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "ng serve",
            "type": "chrome",
            "request": "launch",
            "preLaunchTask": "debugproj",
            "postDebugTask": "killnode",
            "url": "http://localhost:4200/",
            "webRoot": "${workspaceFolder}/app",
            "sourceMapPathOverrides": {
              "webpack:/*": "${webRoot}/*",
              "/./*": "${webRoot}/*",
              "/src/*": "${webRoot}/*",
              "/*": "*",
              "/./~/*": "${webRoot}/node_modules/*"
            }
          },
    ]
}

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "debugproj",
			"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."
					}
				}
			},
			"options": {
				"cwd": "${workspaceFolder}/app/src"
			},
			"runOptions": {
				"runOn": "folderOpen"
			}
		},
		{
			"label": "killnode",
			"type": "process",
			"windows": {
				"command": "taskkill /F /IM node.exe"
			},
			"osx":{
				"command": "killall node",
			},
			"linux":{
				"command": "killall node",
			},
			"presentation": {
				"echo": true,
				"reveal": "always",
				"focus": false,
				"panel": "shared"
			},
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"isBackground": false,
			"dependsOrder": "sequence",
			"dependsOn": "debugproj",
			"problemMatcher": []
		}
	]
}