Looks like the VS Code team is now storing debugging recipes.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

How to serve your angular app and attach the debugger to it in a single configuration

The compound option in the launch.json file allows you to create a single launch configuration that can start multiple launch configurations simultaneously. This is useful if you want to start your web server and attach the debugger to it for example(and why not also start your backend), or if you have any other specific requirements.

You can use it like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Angular Debug",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            },
        },
        {
            "name": "Angular Serve",
            "command": "ng serve --open",
            "request": "launch",
            "type": "node-terminal",
            "cwd": "${workspaceFolder}",
        },
    ],
    "compounds": [
        {
          "name": "Angular Launch",
          "configurations": ["Angular Serve", "Angular Debug"]
        }
      ]
}

Now you have a working debugger that can be launched with a single F5 in VSCode.

There're two different ways of doing that. You can launch a new process or attach to an existing one.

The key point in both processes is to have webpack dev server and VSCode debugger running at the same time.

Launch a process

1. In your launch.json file add the following configuration:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Angular debugging session",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:4200",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }
   

2. Run Webpack dev server from Angular CLI by executing npm start

3. Go to VSCode debugger and run "Angular debugging session" configuration. As a result, new browser window with your application will be opened.

Attach to an existing process

1. For that you need to run Chrome in the debugger mode with opened port (in my case it will be 9222):

   Mac:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

   Windows:

   chrome.exe --remote-debugging-port=9222
   

2. launch.json file will look in the following way:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Chrome Attach",
         "type": "chrome",
         "request": "attach",
         "port": 9222,
         "url": "http://localhost:4200/",
         "webRoot": "${workspaceFolder}"
       } 
     ]
   }
   

3. Run Webpack dev server from Angular CLI by executing npm start
4. Select "Chrome Attach” configuration and run it.

In this case, debugger attached to the existing Chrome process instead of launching up a new window.

I wrote my own article, where I described this approach with illustrations.

Simple instruction how to configure debugger for Angular in VSCode

This is explained in detail on the Visual Studio Code site: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Can use this config:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

@Asesjix answer is very thorough, but as some have pointed out, still requires multiple interactions to start ng serve and then launch the Angular app in Chrome. I got this working with a single click using the following configuration. The main difference from @Asesjix's answer is the task type is now shell and the command calls adds start before ng serve so ng serve can exist in its own process and not block the debugger from launching:

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

Here is a bit lighter solution, works with Angular 2+ (I'm using Angular 4)

Also added the settings for the Express Server if you run the MEAN stack.

{
  // Use IntelliSense to learn about possible Node.js debug 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": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

In my case I'd not used the original Angular project folder tree and I knew there was something going wrong with the webRoot / {workspaceFolder} bit but all my experimenting yielded no result. Got a tip from another SO answer which I'll link if I find it again.

What helped me was finding the content of the variable {workspaceFolder} at runtime and then modifying it to the location of my "src" folder under which you have "app/*". To find it, I added a preLaunchTask to my launch.json file and a task to output the value of {workspaceFolder}.

launch.json, which appears after installing the Chrome debugger

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json Not present by default. Hit Ctrl+Shift+p and I think it's called 'create task for other command' or something similar. Can't seem to see it after tasks.json is created. You could also just create the file in the same location as launch.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

Once I knew the value of ${workspaceFolder}, I fixed it to point to my src folder in my new project tree and it all worked. Debugging requires ng serve to have been run either as prelaunch task or as part of the build (examples above) or in a command prompt.

Here is a link to all the variables you can use:

For those who have read all above and does not having its as a working, check your Angular and Node.js version by ng version (within your project folder).

It should Output versions:

If you have Angular version = 15 and Node.js = 18 then you have another issue. There you can find solution (I spend 1 day to figure it out )

I guess the best and cleanest way is to generate a new project using ng new and then copy the following 3 files:

ng new my-app

Files to copy:

• extensions.json
• launch.json
• tasks.json

I have been looking for a way to do this for some time, and this video gave me a very quick understanding of how to set it up.

GitHub repo for reference: https://github.com/learnsmartcoding/angular19-features-examples/tree/main/.vscode

Basic Configuration

launch.json

This sets up the debug configuration. The preLaunchTask mentioned here is very important

{
    // 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": [
        {
            "type": "chrome", // or msedge
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

task.json

this is the task that the launch.json scrip above waits for. The important line to note in below config is the endsPattern . This is how VS Code identifies that angular has completed building and compiling the code and the localhost is ready to debug.

In one of my use-cases for a brand-new Angular project, I had to change this to Local: , because that is the last line that gets logged after angular had bundled and started the localhost server

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "ng",
        "args": ["serve"],
        "isBackground": true,
        "problemMatcher": {
          "owner": "typescript",
          "pattern": {
            "regexp": ".*",
            "file": 1,
            "location": 2,
            "message": 3
          },
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".*",
            "endsPattern": "Compiled successfully" // Local:
          }
        },
        "presentation": {
          "reveal": "always",
          "panel": "shared"
        }
      }
    ]
  }
  

Advanced Configuration

I wanted to further customize few things. And I found few more resources which help me customize it further:

1. Automatically stop the angular ng serve when I stop the debugger & close terminal

2. use RegEx for endsPattern

3. Use external script to start the angular application

4. Configure debugger for testing

1.Auto-close ng serve terminal

This stack-overflow post helped me with this.

Similar to preLaunchTask we can add a postDebugTask which will be executed when you stop the debugger. This can be used along with VS Code commands to stop the vs-code terminal:

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": [
        {
            "type": "chrome", // or msedge
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve",
            "postDebugTask": "terminate dev server",
        }
    ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "ng serve",
      "type": "shell",
      "command": "ng",
      "args": ["serve"],
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "pattern": {
          "regexp": ".*",
          "file": 1,
          "location": 2,
          "message": 3
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*",
          "endsPattern": "Compiled successfully" // Local:
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      }
    },
    {
      "label": "terminate dev server",
      "command": "echo ${input:terminate}", // the 'terminate' command that's defined in the inputs list
      "type": "shell",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always", // Or "silent", "never"
        "close": true // This will close the terminal when the task exits
      }
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "npm dev" // the name of the task to be terminated when the 'terminate' command is executed.
    }
  ]
}

2.Regex endsPAttern

You can use regex in the endsPattern or beginsPattern to further customize how it works.

This is especially important to understand in case of endsPattern if you're using this task in a different framework or using a different bundler - because this searches for the logs when the app is started using npm start and waits for the matching text to let VS Code know to proceed further. This is how the launch.json knows to wait for the compiler/bundler and when to attach & start the debugger.

3.Use external scripts to start angular app

I have a PowerShell script which I use to start the angular app. And the debugger works well with it. This is because, ultimately VS Code looks for the endsPattern and starts the debugger. So even with any other scripting tool, I can configure VS Code to look for a specific text in the logs.

{
  "label": "startDev_2",
  "type": "shell",
  "command": "powershell ./local-serve.ps1", // external PowerShell script
  "isBackground": true,
  "problemMatcher": {
    "owner": "typescript",
    "pattern": {
      "regexp": ".*",
      "file": 1,
      "location": 2,
      "message": 3
    },
    "background": {
      "activeOnStart": true,
      "beginsPattern": {
        "regexp": "(.*?)"
      },
      "endsPattern": {
        "regexp": "Compiled |Failed to compile."
      }
    }
  },
  "presentation": {
    "reveal": "always",
    "panel": "shared"
  }
}

4.Debug Test cases

You can refer to this example GitHub repo provided by Microsoft to know how to configure the debugger for testing

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