VSCode Debugger Configuration - Single project - Angular 17 SPA, with Node 20, nodemon, Express 4.19; with Edge Browser and Microsoft Edge Tools

README.md

Comments

• Project date: 8/23/24
• Commets generated using ChatGPT 4
• Please, provide any suggestions you may find suitable.
• Not all tasks from tasks.json are used.

Relevant Folder Structure

Running Project

• As you can see in the picture, the breakpoint for Angular is hit.
• It works for both, Angular and ExpressJS.
• Project in Node includes: MongoDB, Web API, and Web Socket.

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", // Specifies the version of the VSCode debugging schema.
  "configurations": [
    {
      "console": "integratedTerminal", // Specifies that the debug output should be shown in the integrated terminal.
      "internalConsoleOptions": "neverOpen", // Ensures the internal debug console doesn't open automatically.
      "name": "nodemon", // The name of the configuration for running the Node.js server with nodemon.
      // "preLaunchTask": "npm: server", // Optional: This line references a task from tasks.json to run before launching the debug session.
      "program": "${workspaceFolder}/server.js", // Defines the entry point of the Node.js application (server.js).
      "request": "launch", // Specifies that this configuration will launch the Node.js application.
      "restart": true, // Automatically restarts the Node.js application if it crashes or files are modified.
      "runtimeExecutable": "nodemon", // Uses nodemon to automatically restart the server on file changes.
      "skipFiles": [
        "**/node_modules/**", // Skips debugging node_modules packages
        "<node_internals>/**" // Skips debugging of Node.js internal files
      ],
      "type": "node" // Indicates that this configuration is for a Node.js environment.
    },
    {
      "type": "msedge", // Specifies that this configuration is for the Microsoft Edge browser.
      "name": "Angular App", // The name of the configuration for the Angular app.
      "request": "launch", // Indicates that this configuration will launch the Edge browser.
      "timeout": 11000, // Sets an 11-second timeout for the debugging session to start.
      "preLaunchTask": "npm: start", // Task to run before launching the debugger, usually the npm start script for Angular.
      "url": "http://localhost:4200", // The URL to launch in the browser, typically where the Angular app runs.
      "presentation": {
        "hidden": true // Hides this configuration from the user interface, it's managed by the compound configuration.
      }
    },
    {
      "type": "msedge", // Specifies another configuration for Microsoft Edge.
      "name": "Launch Edge against localhost", // The name of this configuration for launching Edge with specific arguments.
      "request": "launch", // Indicates that this configuration will launch the Edge browser.
      "runtimeArgs": [
        "--remote-debugging-port=9222" // Launches Edge with a remote debugging port to allow for browser debugging.
      ],
      "url": "http://localhost:4200", // The URL to open in the browser, typically the Angular app.
      "presentation": {
        "hidden": true // Hides this configuration from the user interface.
      }
    },
    {
      "type": "vscode-edge-devtools.debug", // Specifies the use of VSCode Edge DevTools for debugging.
      "name": "Open Edge DevTools", // The name of this configuration for attaching to Edge DevTools.
      "request": "attach", // Indicates that this configuration will attach to an existing process (Edge DevTools).
      "url": "http://localhost:4200", // The URL to attach to, usually the running Angular app.
      "presentation": {
        "hidden": false // This configuration is visible in the user interface.
      }
    }
  ],
  "compounds": [
    {
      "name": "Angular SPA with Node Server", // The name of the compound configuration that combines multiple configurations.
      "configurations": [
        "nodemon", // Includes the Node Server configuration in this compound.
        "Angular App", // Includes the Angular App configuration in this compound.
        "Launch Edge against localhost", // Includes the Launch Edge against localhost configuration in this compound.
        "Open Edge DevTools" // Includes the Open Edge DevTools configuration in this compound.
      ]
    }
  ]
}

package.json

{
  "name": "ta-app",
  "version": "0.0.0",
  "scripts": {
    "build": "ng build",
    "clean": "rmdir /s /q node_modules",
    "dev": "nodemon --exec ng serve",
    "kill3000": "npx kill-port 3000",
    "kill4200": "npx kill-port 4200",
    "lint": "ng lint",
    "lintf": "ng lint --fix",
    "ng": "ng",
    "rebuild": "npm run clean && npm install && rmdir /s /q dist && npm run build --prod",
    "reinstall": "npm run clean && npm install --verbose",
    "server": "nodemon server.js",
    "start": "ng serve",
    "test": "ng test",
    "watch": "ng build --watch --configuration development"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.10",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@binance/connector": "^3.4.0",
    "@binance/futures-connector": "^0.1.3",
    "body-parser": "^1.20.2",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "mongoose": "^8.5.0",
    "rxjs": "^7.4.0",
    "trading-signals": "^5.0.4",
    "tslib": "^2.3.0",
    "winston": "^3.13.1",
    "ws": "^8.18.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.6",
    "@angular-eslint/builder": "17.5.2",
    "@angular-eslint/eslint-plugin": "17.5.2",
    "@angular-eslint/eslint-plugin-template": "17.5.2",
    "@angular-eslint/schematics": "17.5.2",
    "@angular-eslint/template-parser": "17.5.2",
    "@angular/cli": "^17.3.6",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "7.11.0",
    "@typescript-eslint/parser": "7.11.0",
    "eslint": "^8.57.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "nodemon": "^3.1.4",
    "typescript": "~5.4.2"
  }
}

tasks.json

{
  "version": "2.0.0", // Specifies the version of the tasks.json format.
  "tasks": [
    {
      "type": "npm", // Specifies that the task uses npm.
      "script": "start", // Task to start the Angular app.
      "isBackground": true, // Indicates that the task runs in the background.
      "presentation": {
        "focus": true, // The task will take focus in the terminal.
        "panel": "dedicated" // The task will run in a dedicated terminal panel.
      },
      "group": {
        "kind": "build", // This task is part of the build group.
        "isDefault": true // This is the default build task for the Angular app.
      },
      "problemMatcher": {
        "owner": "typescript", // Specifies TypeScript as the problem matcher owner.
        "source": "ts", // Indicates the source for the problem matcher.
        "applyTo": "closedDocuments", // Only applies to closed documents.
        "fileLocation": [
          "relative", // File locations are relative.
          "${cwd}" // The current working directory is used.
        ],
        "pattern": "$tsc", // Uses the TypeScript compiler pattern.
        "background": {
          "activeOnStart": true, // The background matcher is active on start.
          "beginsPattern": {
            "regexp": "^Starting.*" // Pattern to match the start of the build process.
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile." // Pattern to match the end of the build process.
          }
        }
      }
    },
    {
      "type": "npm", // Specifies that the task uses npm.
      "script": "server", // Task to start the Node.js server.
      "isBackground": true, // Indicates that the task runs in the background.
      "presentation": {
        "focus": true, // The task will take focus in the terminal.
        "panel": "dedicated" // The task will run in a dedicated terminal panel.
      },
      "group": {
        "kind": "build", // This task is part of the build group.
        "isDefault": false // This is not the default build task.
      },
      "problemMatcher": {
        "owner": "typescript", // Specifies TypeScript as the problem matcher owner.
        "source": "ts", // Indicates the source for the problem matcher.
        "applyTo": "closedDocuments", // Only applies to closed documents.
        "fileLocation": [
          "relative", // File locations are relative.
          "${cwd}" // The current working directory is used.
        ],
        "pattern": "$tsc", // Uses the TypeScript compiler pattern.
        "background": {
          "activeOnStart": true, // The background matcher is active on start.
          "beginsPattern": {
            "regexp": "^Server starting.*" // Pattern to match the start of the server process.
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile." // Pattern to match the end of the server process.
          }
        }
      }
    },
    {
      "type": "npm", // Specifies that the task uses npm.
      "script": "test", // Task to run tests.
      "isBackground": false, // Tests are not typically run in the background.
      "presentation": {
        "focus": true, // The task will take focus in the terminal.
        "panel": "dedicated" // The task will run in a dedicated terminal panel.
      },
      "group": {
        "kind": "test", // This task is part of the test group.
        "isDefault": true // This is the default test task.
      },
      "problemMatcher": {
        "owner": "typescript", // Specifies TypeScript as the problem matcher owner.
        "pattern": "$tsc", // Uses the TypeScript compiler pattern.
        "background": {
          "activeOnStart": true, // The background matcher is active on start.
          "beginsPattern": {
            "regexp": "^Running tests.*" // Pattern to match the start of the test process.
          },
          "endsPattern": {
            "regexp": "bundle generation complete" // Pattern to match the end of the test process.
          }
        }
      }
    }
  ]
}