CODEWITHSUNDEEP
angularvisual-studio-codechrome-debugging
Robert Daraż
Robert Daraż

Reputation: 323

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?

Upvotes: 3

Views: 6453

Answers (1)

Robert Daraż
Robert Daraż

Reputation: 323

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.

Upvotes: 3

Related Questions