How to debug Angular application in VSCode using Edge browser? -Follow up

Question

How to debug Angular application in VSCode using Edge browser? I have tried the suggestions here but neither works. I was to comment on the last answer but I don't have 50 reputation to do so and answering with a question is impolite, so here I am asking another question.

The two launch.json suggestions in the above topic doesn't work, neither does the auto-generated launch.json from "Debugger for Edge". I tried them separately to no avail (see below)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost(Debugger for Edge)",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug edge (Answer 1 from topic, I removed the things about Chrome was I wouldn't use that browser)",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            },

        },
        {
            "name": "ng e2e",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
            "protocol": "inspector",
            "args": ["${workspaceFolder}/protractor.conf.js"]
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Edge (Answer 2 from topic)",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "trace": true,
            "userDataDir": "${workspaceRoot}/.vscode/edge"
        }
    ]
}

The browser launches and the page(application) is shown, but the breakpoint is not hit. In VSCode the red dot changes to a hollow circle.

The above launch.json were supposed to be in separate code blocks, but the editor wouldn't allow me to use the <pre><code> tags.

Answer 1

First, please check your VSCode version, my VSCode version as below:

And, my angular version: Angular 7.1.4.

To debug the client side Angular code, we'll need to install the Debugger for Edge Extension first.

On the VSCode, click the view menu, and select the extension options to check whether you have already installed the Debugger for Edge extension, and already enable it. Then, press Reload to restart VS Code and activate the extension.

After set the break points in the typescript class, go to the Debug view and add the debug configuration:

after saving changes and select the debug environment, then you could press F5 to debug the code, like this:

Reference: Using Angular in Visual Studio Code