Error connection refused while starting angular project

Question

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?

I think you are serving your project on 4200 and you are using the same port for the debugger too and hence the connection is refused — dileepkumar jami, Feb 12 '19 at 13:08
But I tried change port from 4200 to different in launch.json and it didn't help. — Robert Daraż, Feb 12 '19 at 13:12
Like I said, I tried and worked but I want to use chrome debugger. — Robert Daraż, Feb 12 '19 at 13:58

score 3 · Accepted Answer · answered Feb 15 '19 at 12:35

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: or I can do it via cmd like below: 3.) I installed "Debugger for Chrome" extention via marketplace like below: After this 3 steps I added some breakpoint and could run (F5) my application in debug mode like below: 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: 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!) 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.

Error connection refused while starting angular project

1 Answers1