Run & Debug Angular app on VS Code

Prerequisite

Step 1 launch.json

Create 'chrome task' configuration

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Run & debug my app on chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "start"
        }
    ]
}

Step 2 tasks.json

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

Step 3 Run debugger

• press F5

References

[VsCode-tasks] https://code.visualstudio.com/docs/editor/tasks#_custom-tasks