Configure Angular with .NET core Api request port

Question

I'm upgrading an older app to .NET 6 and Angular 13. I've created a new Angular + Net project from VS2022 then I've used it in upgrade. Now my app starts but seems that Angular sends api requests to a wrong port (44449 instead of 7148).

Where I can configure it? I found port configurations in:

project.cs:

<SpaProxyServerUrl>https://localhost:7148</SpaProxyServerUrl>

Properties\launchSettings.json:

"iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:33062",
      "sslPort": 44349
    }

ClientApp\launchSettings.json:

"start:windows": "ng serve --port 44449 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
"start:default": "ng serve --port 44449 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",

Hussein Beygi · Accepted Answer · 2022-05-25 17:34:18Z

1

You have two options :

1- update the launchSettings.json to your desire port based on your request for HTTP or HTTPS

2- update the Angular to send request to current server port

I suggest the first one, it's easier and less error-prone the second option

If you need more help, just leave a comment!

answered May 25, 2022 at 17:34

Hussein Beygi

4713 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mrapi Over a year ago

still got: Status Code: 404 Not Found ,Request URL: localhost:44449/api/login Request Method: POST Referrer Policy: strict-origin-when-cross-origin, older working app makes the same request: to SPA default port

Hussein Beygi Over a year ago

That's the problem strict-origin-when-cross-origin config your CORS take a look at this link learn.microsoft.com/en-us/aspnet/core/security/…

mrapi Over a year ago

I've installed swagger,it can be accessed on port 7148, not on 44449 on which Angular makes the request, which is strange to me that if I make a new project, the api responds via Postman on the same port on which Angular starts, which does not happen in my project

mrapi Over a year ago

seems the problem was proxy.conf.js configuration

cklimowski · Accepted Answer · 2022-05-25 18:21:47Z

1

To have the Angular app call the port you want, change your ClientApp launch settings to:

"start:windows": "ng serve --port 7148 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
"start:default": "ng serve --port 7148 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",

answered May 25, 2022 at 18:21

cklimowski

5667 silver badges22 bronze badges

Collectives™ on Stack Overflow

Configure Angular with .NET core Api request port

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related