angularvisual-studio-codechrome-debugging

Error connection refused while starting angular project

Someday I was creating projects in Angular 4 and I want to do this again but on a newer version of Angular.

What I did:

1.) Installation of Visual Studio Code.

2.) Installation of Nodejs: Node version is 10.15.1 Npm version is 6.4.1

3.) Installation of Angular CLI by "npm install -g @angular/cli" commend.

4.) I created new project by cmd and build him by ng serve. After all I launch him by localhost:4200 in my browser - everything was great.

5.) Installation of Debugger for Chrome.

6.) Changing default port from 8080 to 4200.

7.) Launching the project and I am getting ERR_CONNECTION_REFUSED.

I tried also launch project on default port (4200) - the same situation (error connection).

What did I wrong? I forgot about something or I don't know something important? I don't have any warnings or errors in console/logs. What I should do, to have my project in Chrome browser under localhost:PORT?

Solution

  • I resolved this issue.
    I can work with my application in two modes Launch or Attach.

    In the first case (launch) I had to do:
    1.) I added configuration in launch.json for launch mode like below:

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

    Details:
    Most important is set good port in url. I had to set 4200 port because it's default port for ng serve (https://angular.io/cli/serve).
    2.) I had to compile my application. I can do it via terminal in Visual Studio Code like below: enter image description here or I can do it via cmd like below: enter image description here 3.) I installed "Debugger for Chrome" extention via marketplace like below: enter image description here After this 3 steps I added some breakpoint and could run (F5) my application in debug mode enter image description here like below: enter image description here In the second case (attach) I had to do:
    1.) I added configuration in launch.json for attach mode like below:

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

    2.) I installed "Debugger for Chrome" extention via marketplace.
    3.) I set remote debugging ("--remote-debugging-port=9222") for Chrome application like below: enter image description here Details:
    Path for my Chrome "target":
    "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
    4.) I started that Chrome which had remote debugging in path of "target".
    Be careful!
    If you have Chrome icon on taskbar, you have to add remote debugging newly!(it's stupid I know).
    5.) After this 4 steps I added some breakpoint and could run (F5) my application (before it, you have to compile project - step 2 in first example!) enter image description here in debug mode and everything works.

    Now when I have to work with angular project I am compiling project via VSCode or cmd, I am starting Chrome in remote debugging on localhost:4200 and creating some front-end. When something is wrong, I am launching attach via VSCode and I can debug.