Nx: Could not connect to the debugger when using the default port (0)

[eranshmil]

Expected Behavior

Recently, I upgraded our project from Angular 8.x to 9.x, Nest 6.x to 7.x and Nx 8.x to 9.x. Since then the debugger could not connect to the process.

Current Behavior

After the upgrade and migration, only passWithNoTests been added to the angular.json and there were no changes to nx.json and any of the tsconfigs.
It is not working even without the changes to the files and only using the upgraded dependencies.

I am running the project from the terminal using ng serve and I tried reopening VScode, removing/reinstalling node_modules and also debugging using the Chrome's dedicated Node DevTools for Node.js.

When adding port to the options in angular.json it works without any problem.
So it is probably related to #2510.

Steps to Reproduce

You can find my repro here. In master branch you can find the files before the upgrade, and in nx9 branch the upgraded version.

Or just run the following steps:

1. Create a new workspace using the latest v8:

   npx [email protected] repro-nx-nest-debug
   

2. Upgrade nx:

   yarn update
   

3. Add a breakpoint and run the api:

   yarn start api
   

4. Try to attach to the process using the options Debug: Attach to Node process from the Command Palette....

Context

• I'm using VSCode 1.43.1 and Node.js 12.8.1

nx report

  @nrwl/angular : 9.1.2
  @nrwl/cli : 9.1.2
  @nrwl/cypress : 9.1.2
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 9.1.2
  @nrwl/linter : 9.1.2
  @nrwl/nest : 9.1.2
  @nrwl/next : Not Found
  @nrwl/node : 9.1.2
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.1.2
  @nrwl/web : Not Found
  @nrwl/workspace : 9.1.2
  typescript : 3.7.5

Relevant packages

  @angular-devkit/[email protected]
  @angular/[email protected]
  @angular/[email protected]
  @angular/[email protected]
  @angular/[email protected]
  @angular/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  @nestjs/[email protected]
  [email protected]
  [email protected]
  [email protected]

Relevant project configuration in angular.json

  "server": {
    "root": "apps/server",
    "sourceRoot": "apps/server/src",
    "projectType": "application",
    "prefix": "server",
    "schematics": {},
    "architect": {
      "build": {
        "builder": "@nrwl/node:build",
        "options": {
          "outputPath": "dist/apps/server",
          "main": "apps/server/src/main.ts",
          "tsConfig": "apps/server/tsconfig.app.json",
          "assets": ["apps/server/src/assets"]
        },
        "configurations": {
          "production": {
            "optimization": true,
            "extractLicenses": true,
            "inspect": false,
            "fileReplacements": [
              {
                "replace": "apps/server/src/environments/environment.ts",
                "with": "apps/server/src/environments/environment.prod.ts"
              }
            ]
          }
        }
      },
      "serve": {
        "builder": "@nrwl/node:execute",
        "options": {
          "buildTarget": "server:build"
        }
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
          "tsConfig": [
            "apps/server/tsconfig.app.json",
            "apps/server/tsconfig.spec.json"
          ],
          "exclude": ["**/node_modules/**", "!apps/server/**"]
        }
      },
      "test": {
        "builder": "@nrwl/jest:jest",
        "options": {
          "jestConfig": "apps/server/jest.config.js",
          "maxWorkers": 3,
          "tsConfig": "apps/server/tsconfig.spec.json",
          "passWithNoTests": true
        }
      }
    }
  }

[FrozenPandaz]

VSCode does not support port 0 yet (https://github.com/microsoft/vscode/issues/52373)

@Cammisuli Do you think it makes sense to revert the change to the default port because vscode doesn't support it?

[Cammisuli]

@FrozenPandaz this is hard to balance; if we revert the change, then we will lose the dev experience of watching and reloading.

[eranshmil]

Maybe revert this change and add a section about it in the documentation and let the user choose whether to set the port in the options to 0 or not.

[fsystemdevelopment]

For anyone having the same issue, fast solution add port to angular.json in section see attached

[Cammisuli]

@fsystemdevelopment provides the solution for this.

Also VSCode now provides the JavaScript debugging terminal where it’ll start debugging node scripts as soon as the command is executed.

I’m gonna close this for now because the solution was provided. We can reopen if needed 🙂

[snaerth]

I have the exact same config but still not being able to run the attach process

Error processing attach: Error: Could not connect to debug target at http://localhost:7777: Promise was canceled
at e (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.js-debug/src/extension.js:1:103397)

The launch config

The workspace config

Any idea what I might be missing?