I created a new Angular and ASP.NET Core solution using the template in Visual Studio. I am developing on a Windows 11 machine and running NVM for Windows.
Environment is:
- Visual Studio 2022: 17.11.2
- Angular CLI: 18.2.3
- Node: 20.17.0
- Package Manager: npm 10.8.2
After creating the new solution I checked that the Startup Project was set to “multiple startup projects” and that the server was above the client and both set to start.
I select Debug > Start Without Debugging and two command windows open, the first displaying the following:
> [email protected] prestart
> node aspnetcore-https
> [email protected] start
> run-script-os
> [email protected] start:windows
> ng serve --ssl --ssl-cert "%APPDATA%ASP.NEThttps%npm_package_name%.pem" --ssl-key "%APPDATA%ASP.NEThttps%npm_package_name%.key" --host=localhost
Initial chunk files | Names | Raw size
polyfills.js | polyfills | 90.23 kB |
main.js | main | 6.11 kB |
styles.css | styles | 95 bytes |
| Initial total | 96.43 kB
Application bundle generation complete. [1.527 seconds]
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
Target: https://localhost:7041
➜ Local: https://localhost:4200/
➜ press h + enter to show help
The second displaying the following:
warn: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[16]
The WebRootPath was not found: C:WorkspacesDPS_04DPS_04.Serverwwwroot. Static files may be unavailable.
warn: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[16]
The WebRootPath was not found: C:WorkspacesDPS_04DPS_04.Serverwwwroot. Static files may be unavailable.
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:7041
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5173
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:WorkspacesDPS_04DPS_04.Server
The server appears to start and run fine. I can issue a GET request from Postman to https://localhost:7041/weatherforecast
and see the values returned. However, the client (in Chrome) just hangs, displaying an empty browser window and the Developer Tools console is blank. If I return to the terminal and control-click on https://localhost:4200/
then a new tab in my main Chrome window opens and the client runs and pulls the data from the API. If I click on the Chrome window which Visual Studio opened to run the client within and create a new tab, paste the https://localhost:4200/
URL and run it, it too hangs. If I open a new Chrome window and paste the URL in it runs fine.
If I instead I hit F5 and run with debugging I get the following error in my terminal:
[vite] http proxy error: /weatherforecast
AggregateError [ECONNREFUSED]:
at internalConnectMultiple (node:net:1118:18)
at afterConnectMultiple (node:net:1685:7)
The client does display this time in the new browser window, but initially there is no data returned from the http request.
However, if I refresh the browser, the data is pulled in from the server, almost as if the server wasn’t ready in time. This is an improvement, but our application is soon to get very large and I much prefer to run without debugging and use the Chrome developer tools to perform any client-side debugging.
I have read of this problem being encountered previously in this forum and it was reportedly fixed in a later release of Visual Studio (before the version I am running). Some people have experienced this and regressed back to an earlier version of Node, which I am resistant to doing if at all possible. Is anyone else able to create a new Angular and ASP.NET project and simply run it without debugging please?
Any suggestions or thoughts would be very welcome. Thanks.
1