Debugging and breakpoint not working for angular in VS code

See more:

Node.js

angular-cli

VS-Code

I have an Angular application that I am trying to debug in VS Code. When I write code in a particular typescript file and put a breakpoint on a method or statement, it is bound. But when I try to debug through Run > Start Debugging, the breakpoint becomes unbound. Once debugging starts, nothing happens afterwards. Neither does it hit the breakpoint, nor do the buttons (Step Over, Step Into, Run, etc.) of the floating debugging toolbar at the top get enabled. I followed this and this videos, and tried almost everything mentioned in this thread. But nothing solved my problem. I even upgraded node.js 17 to 18, yet of no avail. I tried multiple browsers like Edge, Chrome, Firefox and Opera. Debugging happens nowhere. So, what to do now to get VS Code debugging up and running? Because otherwise it is too cumbersome to use console.log(); every time to debug.

Please ask me if you need any more info of my code.

What I have tried:

My environment:
OS - Windows 10
VS Code - 1.73.1
Node.js - 18.12.1
Angular CLI - 14.2.6

My launch.json file:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "msedge",
      "sourceMaps": true,
      "trace": true,
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "http://localhost:9876/debug.html"
    }
  ]
}

My task.json file:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "bundle generation complete"
          }
        }
      }
    },
    {
      "type": "npm",
      "script": "test",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "bundle generation complete"
          }
        }
      }
    }
  ]
}