2

I've recently updated my angular-14 app to angular 15 following this migration guide. I upgraded Node from 16.17.0 to 18.10.0 as well.

I've ran npm install and npm start and I'm getting errors when my app sends http requests:

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/physicians/ to [backend_server] [ETIMEDOUT] (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm using a proxy for my api calls, which worked well before migrating:


{
  "/api": {
    "target": "[backend_server]",
    "secure": true,
    "changeOrigin": true
  }
}

Here is my package.json:

{ 
   "dependencies": {
       "@angular/animations": "^15.0.0",
       "@angular/cdk": "^15.0.0",
       "@angular/common": "^15.0.0",
       "@angular/compiler": "^15.0.0",
       "@angular/core": "^15.0.0",
       "@angular/forms": "^15.0.0",
       "@angular/material": "^15.0.0",
       "@angular/platform-browser": "^15.0.0",
       "@angular/platform-browser-dynamic": "^15.0.0",
       "@angular/router": "^15.0.0",
       "rxjs": "~7.5.0",
       "tslib": "^2.3.0",
       "zone.js": "~0.11.4"
     },
     "devDependencies": {
       "@angular-devkit/build-angular": "^15.0.0",
       "@angular/cli": "~15.0.0",
       "@angular/compiler-cli": "^15.0.0",
       "@types/jasmine": "~4.0.0",
       "jasmine-core": "~4.3.0",
       "karma": "~6.4.0",
       "karma-chrome-launcher": "~3.1.0",
       "karma-coverage": "~2.2.0",
       "karma-jasmine": "~5.1.0",
       "karma-jasmine-html-reporter": "~2.0.0",
       "typescript": "~4.8.4"
     }
}

and my angular.json:

{
  "projects": {
    "app": {
      "architect": {
        "build": {...},
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "development": {
              "browserTarget": "app:build:development"
            }
          },
          "defaultConfiguration": "development",
          "options": {
            "proxyConfig": "src/proxy.conf.json"
          }
        },
        "test": {...}
      }
    }
  }
}

Did I miss something during my app migration?

The issue occurs on windows and linux, after migrating node back to v16.17.0, the issue does not occur anymore.

Carla C
  • 79
  • 5
  • Is `proxy.conf.json` actually in `src/`? Typically it's in the root folder, so: `"proxyConfig": "proxy.conf.json"` – Richard Dunn Dec 13 '22 at 16:22
  • Yes it is, according to the error message the file seems to be read but webpack fails... – Carla C Dec 14 '22 at 07:52
  • Derp, of course it is... You could try adding `"logLevel": "debug"` inside your `"/api"` block in the `proxy.conf.json`, might give you some better insight. – Richard Dunn Dec 14 '22 at 11:31
  • There's no additional logs.. could this be related to @angular-devkit/build-webpack? – Carla C Dec 14 '22 at 13:06
  • Is there a strong need to upgrade to Node 18? I personally wouldn't be rushing to use the latest version, not for something like Angular, unless you enjoy debugging issues like this. One suggestion I can make is that when I upgrade an Angular app I usually generate a new app just to compare all the config files with the app I'm upgrading. There's usually a tonne of undocumented changes. I typically copy/paste those files over and update any customisations I have. Failing all that, getting a look at the server logs might prove useful. – Richard Dunn Dec 14 '22 at 14:01
  • 1
    No strong need right now but I gess I'll have to migrate one day. I'll try your suggestion, thanks! – Carla C Dec 15 '22 at 12:30
  • I have the same problem, some Angular 15 projects work fine, others don't. Using node 16 resolves the problem. – pberden Jan 13 '23 at 13:33

1 Answers1

2

Updating the proxy config from localhost to 127.0.0.1 fixed the issue for us.

user472749
  • 429
  • 1
  • 4
  • 13