VScode not debugging Angular project, Unbound breakpoints

Question

I have tried everything I could find here and on other websites. From playing with the sourcemap settings, webroot, launch config in general, nodejs versions and others. I can't seem to get the debugger working. With npm start the breakpoints aren't unbounded, but it doesn't hit them either. I'm using ng serve when trying to debug. Both Edge and Chrome aren't working. Same problem for both. I also tried a friend's project on my computer. His Angular projects debugs just fine.

https://i.stack.imgur.com/oH49Q.png

• VScode 1.64.2
• NodeJS v17.0.1 (also tried v16.14.0 and v16.0.0)
• NPM 8.1.3
• Angular 13.0.2

This is the error I'm getting:

[5200:16048:0211/170643.863:ERROR:edge_auth_errors.cc(402)] EDGE_IDENTITY: Get Default OS Account failed: Error: Primary Error: kImplicitSignInFailure, Secondary Error: kAccountProviderFetchError, Platform error: 0, Error string:
 
    Angular is running in development mode. Call enableProdMode() to enable production mode.
    list http://localhost:3000/api/user
    [webpack-dev-server] Live Reloading enabled.
[5200:15036:0211/170646.974:ERROR:chrome_browser_main_extra_parts_metrics.cc(251)] START: GetDefaultBrowser(). If you don't see the END: message, this is crbug.com/1216328.    
[5200:16048:0211/170646.983:ERROR:device_event_log_impl.cc(214)] [17:06:46.982] USB: usb_device_handle_win.cc:1049 Failed to read descriptor from node connection: Een apparaat dat op het systeem is aangesloten, werkt niet. (0x1F)    
[5200:16048:0211/170646.985:ERROR:device_event_log_impl.cc(214)] [17:06:46.984] USB: usb_device_handle_win.cc:1049 Failed to read descriptor from node connection: Een apparaat dat op het systeem is aangesloten, werkt niet. (0x1F)    
[5200:15036:0211/170646.993:ERROR:chrome_browser_main_extra_parts_metrics.cc(255)] END: GetDefaultBrowser()

These are my current settings:

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Bibliotheek": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Bibliotheek",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "sourceMap": true,
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "Bibliotheek:build:production"
            },
            "development": {
              "browserTarget": "Bibliotheek:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Bibliotheek:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "Bibliotheek"
}

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": [
    {
      "name": "Launch ng serve & Edge",
      "type": "pwa-msedge",
      "request": "launch",
      // "preLaunchTask": "npm: ng serve",
      "url": "http://localhost:4200",
      // "webRoot": "${workspaceFolder}/src",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "sourceMap": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**"
      ],
      // "sourceMapPathOverrides": {
      //   "webpack:/*": "${webRoot}/*",
      //   "/./*": "${webRoot}/*",
      //   "/src/*": "${webRoot}/*",
      //   "/*": "*",
      //   "/./~/*": "${webRoot}/node_modules/*"
      // },
      "trace": true
    }
  ]
}

Any help is welcome. Thanks in advance.