I try to tune debug Angular frontend with my Backend API, but failed. My backend with VS2022 working on port http://localhost:55278 I start Angular with proxy in console

ng serve --open --proxy-config proxy.conf.json

My proxy.conf.json is

{
  "/api": {
   "target": "http://localhost:55278",
   "secure": false,
   "logLevel": "debug",
   "changeOrigin": true
  }
}

Without VS debugger I can see my site if I start site http://localhost:4200/

Than I prepare launch.json for VS Code

{
    // 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 index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "file": "${workspaceFolder}/index.html"
        },
        {
            "name": "Launch localhost",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "timeout": 90000,
            "tmpDir": "/some/folder/of/yours/with/write/perms",
            "firefoxExecutable": "C:\\Program Files\\Mozilla Firefox\\firefox.exe"
        },
        {
            "name": "Attach",
            "type": "firefox",
            "request": "attach",
            "pathMappings": [
                {
                    "url": "webpack:///src/app/pages/admin/home",
                    "path": "${workspaceFolder}/src/app/pages/client/home"
                },
                {
                    "url": "webpack:///src/main.ts",
                    "path": "${workspaceFolder}/src/main.ts"
                }
            ]
        },
        {
            "name": "Launch WebExtension",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "addonPath": "${workspaceFolder}"
        }
    ]
}

And if I press Attach or Lanch in VS Code I have receiving error message

[HPM] POST /api/auth/user/ -> http://localhost:55278
[HPM] Error occurred while trying to proxy request /api/auth/user/ from localhost:4200 to http://localhost:55278 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)   

I'm novice in Angular development and don't understand what is going wrong?

CodePudding user response：

It seems a configuration error of your launch.json

Try to add url property as you just do in "Launch localhost".

for example:

    {
    // 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 index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:4200",
            "file": "${workspaceFolder}/index.html"
        },
        {
            "name": "Launch localhost",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "timeout": 90000,
            "tmpDir": "/some/folder/of/yours/with/write/perms",
            "firefoxExecutable": "C:\\Program Files\\Mozilla Firefox\\firefox.exe"
        },
        {
            "name": "Attach",
            "type": "firefox",
            "request": "attach",
            "url": "http://localhost:4200",
            "pathMappings": [
                {
                    "url": "webpack:///src/app/pages/admin/home",
                    "path": "${workspaceFolder}/src/app/pages/client/home"
                },
                {
                    "url": "webpack:///src/main.ts",
                    "path": "${workspaceFolder}/src/main.ts"
                }
            ]
        },
        {
            "name": "Launch WebExtension",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:4200",
            "addonPath": "${workspaceFolder}"
        }
    ]
}