Angular is a great front-end framework for web apps. Visual Studio Code is a great source code editor. Their powers combined let you not only develop Angular app code but also debug it through the editor! VS Code debugging even works for TypeScript

The Basic Guide

• Make sure to have Google Chrome installed in its default location
• Use NPM to install Angular CLI globally
  npm install -g @angular/cli
• Use Angular CLI to create a new Angular application.
  ng new my-app
• Change to the newly created application directory and open VS Code.
  cd my-app
code .

Configure launch.json file

• Click on the Debug icon in the Activity Bar of VS Code to bring up the Debug view. Then click on the gear icon to configure a launch.json file, selecting Chrome for the environment:
• Replace content of the generated launch.json with the following three configurations:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "start",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "preLaunchTask": "npm: start",
            "postDebugTask": "terminate"
        },
        {
            "name": "test",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9876/debug.html",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "./src/*": "${workspaceFolder}/src/*"
            },
            "preLaunchTask": "npm: test",
            "postDebugTask": "terminate"
        },
        {
          "name": "e2e",
          "type": "node",
          "request": "launch",
          "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
          "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
        }
    ]
}

Configure tasks.json file

• Create tasks.json file in the same location where the launch.json got created
• Copy the following content to the tasks.json file
• Feel free to change the scipt command and its arguments based on your usage

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "npm: start",
            "detail": "npm run start",
            "type": "npm",
            "script": "start",
            "isBackground": true,
            "presentation": {
                "panel": "dedicated",
                "clear": true
            },
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": [
                {
                    "owner": "typescript",
                    "source": "ts",
                    "applyTo": "closedDocuments",
                    "fileLocation": [
                        "relative",
                        "cwd"
                    ],
                    "base": "$tsc",
                    "pattern": {
                        "regexp": "^(Error: )?([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+TS(\\d+)\\s*:\\s*(.*)$",
                        "file": 2,
                        "line": 3,
                        "column": 4,
                        "severity": 5,
                        "code": 6,
                        "message": 7
                    },
                    "background": {
                        "activeOnStart": true,
                        "beginsPattern": {
                            "regexp": "(.*?)"
                        },
                        "endsPattern": {
                            "regexp": "Compiled |Failed to compile."
                        }
                    }
                }
            ]
        },
        {
            "label": "npm: test",
            "detail": "npm run test",
            "type": "npm",
            "script": "test -- --watch --code-coverage --browsers ChromeHeadless",
            "isBackground": true,
            "presentation": {
                "panel": "dedicated",
                "clear": true
            },
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "problemMatcher": [
                {
                    "owner": "typescript",
                    "source": "ts",
                    "applyTo": "closedDocuments",
                    "fileLocation": [
                        "relative",
                        "cwd"
                    ],
                    "base": "$tsc",
                    "pattern": {
                        "regexp": "^(Error: )?([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+TS(\\d+)\\s*:\\s*(.*)$",
                        "file": 2,
                        "line": 3,
                        "column": 4,
                        "severity": 5,
                        "code": 6,
                        "message": 7
                    },
                    "background": {
                        "activeOnStart": true,
                        "beginsPattern": {
                            "regexp": "(.*?)"
                        },
                        "endsPattern": {
                            "regexp": "TOTAL:|Failed to compile."
                        }
                    }
                }
            ]
        },
        {
          "label": "terminate",
          "presentation": {
            "reveal": "always",
            "panel": "shared"
          },
          "command": [
            "${command:workbench.action.tasks.terminate}"
          ]
        }
    ]
}

Debugger Config and Source Control

Typically, it’s a best practice to avoid committing user-specific config files to source control. One user’s settings could conflict with another’s, potentially breaking workspaces. Personally, I would caution against submitting anything in the .vscode directory to source control unless (a) everyone on the team uses VS Code exclusively for the project and (b) the config file entries are usable by everyone on the team.