Debugging doesn't work in Visual Studio Code after upgrade to angular v17 with browser-esbuild builder

[mspace]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.0.1

Description

We have a task to upgrade our existing angular application from angular 16 to 17.

We followed https://update.angular.io/?l=3&v=16.0-17.0

ng update @angular/core@17 @angular/cli@17

Our angular.json looks like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "UI": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "nl",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser-esbuild",
          "options": {
            "allowedCommonJsDependencies": [
              "css-element-queries",
              "hammerjs",
              "dagre",
              "backbone",
              "lodash",
              "jquery",
              "ip-cidr",
              "resemblejs",
              "luxon",
              "qrcode"
            ],
            "outputPath": "../web/Sources/Web/Web/spa",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ng2-pdfjs-viewer/pdfjs",
                "output": "/assets/pdfjs"
              }
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/signalr/jquery.signalR.min.js",
              "./src/assets/libraries/resemble.js"
            ],
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "proxyConfig": "proxy.conf.js",
            "buildTarget": "UI:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "UI:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "UI: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.scss"
            ],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "UI:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "UI:serve:production"
            }
          }
        }
      }
    }
  }
}

From visual studio code, we navigate to Run and Debug section and attach to chrome. Launch.json file content

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    }
}

Because we have set outputPath, the build application is copied here:

Debugging works from http://localhost:4200, if we ran ng serve command, but we are serving our application from URL:

https://example.com/dashboard/spa/user-management (example.com points to localhost, defined in host file of Windows)

We are using next command for build (defined in package.json):

ng build --watch --base-href /dashboard/spa/ --output-hashing all

Debugging doesn't work

Minimal Reproduction

• set outputPath in angular.json and host application not from localhost:4200

Exception or Error

No response

Your Environment

Angular CLI: 17.3.0
Node: 18.19.1
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 17.3.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.0
@angular-devkit/build-angular   17.3.0
@angular-devkit/core            17.3.0
@angular-devkit/schematics      17.3.0
@schematics/angular             17.3.0
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.4.2
zone.js                         0.14.4

Anything else relevant?

No response

[mspace]

Solved it by updating launch.json to this:

 "configurations": [
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "*": "${webRoot}/*"
      }
    },

Page is server from /dashboard/spa

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}