Development Server hot updates not working

Short answer.

Delete 'Dist' folder in ClientApp folder. in VisualStudio

and Reboot and Run

After a ton of messing around, I finally got this working and thought I would share what is going on.

When you run ng build it compiles and outputs to the ClientApp/dist folder. When you start the Debug Session your project uses this version. If you change a file at runtime it will re-compile the files but it will not overwrite the compiled files in the dist directory. I think because the files were manually generated outside of the UI, VS thinks it can not overwrite them.

So if you start running into this same problem luckily there is an easy fix, simply delete the ClientApp/dist folder before you start the Debug Session. Visual Studio will compile the files in the background and when you update a source file or style sheet your browser should refresh automatically.

Update

Another thing I found is if you need to manually run ng build there is another way to keep the files up-to-date at least (requiring reload):

package.json

   "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "debug": "ng serve --watch",
  },

Then run ng build --watch instead of ng build this will put the prompt into a watch mode (press ctrl c to end), then every time you change one of the source files it will update. I added the "debug" because I wasn't sure if it would mess with the production, always safe to keep things existing or default if you can as a backup.

Then in Startup.cs (Configure(…)) update the server to use the new "debug":

spa.UseAngularCliServer(npmScript: "debug");

---

Update - 2

Another thing that I have found when using Angular and VS (2017) is if you happen to have an error somewhere in your code that isn't picked up by the cli compiler, especially in any of the constructors or ngOnInit() functions, it will hang up the Angular Service even after shutdown, making it seem like the hot-updates are no longer working. This will lead to complete Madness because none of the changes or updates will be loaded until the service is shutdown.

Another possible cause are errors when compiling .scss or Angular. Check the "Output" window for any Angular-cli Errors or in the Browsers Output.

After shutting down VS, make sure that VSCompiler.exe, any extra Console Windows Host (Angular Server, not the one running under the SQL User i.e. MSSQLFDLauncher... ) and any Visual Studio services are shutdown in your Task Manager.

I realized that it was actually an ERROR in MY CODE that was causing everything to stop working or not work at all. Angular and .NET will NOT always throw an error, sometimes the errors are simply skipped (especially when there are syntax errors) or output in the midst of all the other outputs.

More than likely if things stop working, it is either because of an error or some other reason that caused the compiler to stop responding. One last area to double check are your package.json and angular.json, especially any paths, then run the following and keep an eye on the output for updates that need to be made:

ng update 
npm update
npm rebuild
npm install

The default .json files should work right out of the package, try to revert back to those to check your configuration. Deleting the dist folder basically is a shortcut for the above (minus the actual output, let VS compile before Debug), forcing angular to recompile everything but keep in mind that if the service is hung up, it won't matter what you do until that service is stopped.