ECONNREFUSED error during "Learn Angular" freecodecamp.org video

JavaScript
1

To begin, I’m new to angular and I’m following the tutorial video posted on the freeCodeCamp.org YouTube channel step by step. I’ve been stuck on this issue for nearly 2 weeks and have spent many hours looking for solutions in forums. I realize this is a common error, but after trying a couple dozen or so solutions but finding no success I figure I may as well post my experience and maybe it can shed some light on this problem in case someone else runs into this issue.

The Issue

The error occurs while following along for the “Angular Tutorial #13” part of the video which starts around 1:42:00. I follow all steps exactly as shown in the video but I encounter the following error message in the terminal in which I run “npm start” :
[HPM] Error occurred while trying to proxy request /api/file.php from localhost:4200 to http://localhost:1234 (ECONNREFUSED)
My package.json scripts for “start”: “ng serve --proxy-config proxyconfig.json” and my proxyconfig.json contains:

{
    "/api":{
        "target": "http://localhost:1234",
        "secure": false,
        "changeOrigin": true
    }
}

In CMD I navigate to the folder “intro2angular” which is the root of “/test/api/file.php” and I run
php -S localhost:1234 prior to running npm start in the powershell in VisualStudioCode. Then I run npm start . Code compiles successfully. In Chrome, if I go to http://localhost:1234/test/api/file.php then the file is displayed in the browser. However , if I go to http://localhost:4200 and click an anchor which executes the code to request file.php then the [HPM] Error occurred while trying to proxy request /api/file.php from localhost:4200 to http://localhost:1234 (ECONNREFUSED) error is displayed in terminal. In the Network tab of Developer Tools in Chrome, when I check the Headers for file.php I see the follow:

Request URL: http://localhost:4200/api/file.php
Request Method: GET
Status Code: 504 Gateway Timeout
Remote Address: 127.0.0.1:4200
Referrer Policy: no-referrer-when-downgrade

Forgive me for being verbose in explaining every step I followed, but since I’ve seen several similar forum posts regarding the ECONNREFUSED error being raised while trying to use a proxy, I thought that including every minor detail may be necessary to distinguish the source of the error in this instance. If any more details/code is necessary I’m more than happy to include it.

Solutions I’ve tried thus far

Note that this is not a complete list, I’ve tried several other solutions but these seem to be the most common which have worked for others. Also, I’m not saying that I wouldn’t give these solutions another try as I am open to any and all suggestions.

  1. specifying random localhost ports for both the angular app and file.php
  2. using setTimeout to add a delay to the .getData() function call
  3. disabling firewall
  4. including the option "pathRewrite": {"^/api" : ""} to proxyconfig.json

I appreciate any and all help/suggestions/discussions around this issue as I’ve had no success on my own and I am unable to continue with the angular tutorial until this issue is resolved. Thank you in advance.

1 Like
2

I have the same problem

3

Had the same problem, the only solution I found was to use “127.0.0.1” instead of “localhost” in both your proxyconfig.json and php -S parameters. Hope this helps.

1 Like