I'm trying to scaffold up a brand new ASP.NET Core Web Application in Visual Studio 2019 with an Angular template targeting ASP.NET Core 3.1.
While the application works, Live Reloading will only work once or twice before breaking and then it stops working altogether regardless of whether you make changes to .ts files or .html files. Closing Visual Studio and then using the task manager to shut down instances of Node.js sometimes gets it working again but then if you're lucky it will only do a live reload once or twice before breaking again.
I can tell that the Angular CLI is recompiling my code every time I save changes because all I have to do is click on the address bar in my browser and hit enter to see my changes being reflected. So this appears to primarily be a failure in trying to send the browser a refresh command.
Things I have tried to narrow down this issue:
Upgrading my version of Angular in the ClientApp folder to 9.1 or downgrading to 5.2.0. In both cases I still get the live reloading bug. It doesn't appear to be related to the version of Angular used but rather to the version of .net core I'm targeting.
Use command prompt to launch my Angular project (npm start) and then visit localhost:4200 - under this scenario live reloading works every time I save a change to a file in my ClientApp folder - but I have effectively cut .net core out of the loop here. I am no longer using ASP.NET Core in this scenario to serve up my Angular SPA.
Use command prompt to launch my Angular project (npm start) and then edit my Startup.cs in the following way:
if (env.IsDevelopment())
{
//spa.UseAngularCliServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
}
The Live reloading bug is still present in this scenario
- Scaffold up a new ASP.NET Core Web Application in Visual Studio 2019 with an Angular template but this time target ASP.NET Core 2.1. This time live reloading works perfectly which confirms my theory that this has to do with the version of .net core being targeted. It scaffolds up an Angular 5.2.0 SPA but you can swap that out for an Angular 9.1 SPA and live reloading of the browser will still work.
Has any one else had this issue or found any work arounds? I would really like to start my new project in .net core 3 but I am concerned that it has issues and doesn't play well with Angular at the moment.
EDIT
I don't know if it's related but this problem shows up slightly differently in Internet Explorer. In IE, bringing up the console repeatedly shows the following script errors occuring over and over
Invalid Host/Origin header
[WDS] Disconnected!
These script errors disappear when using an older Angular framework (5.2.0) but live reloading still does not work in this case so long as I'm using ASP.NET Core 3.1
It is also possible to prevent these script errors using either
"disableHostCheck": true (angular.json -> architect -> serve -> options)
OR
"start": "ng serve --configuration es5 --disable-host-check" (package.json)
BUT this will not fix live reloading in internet explorer