Development Server hot updates not working

Question

I upgraded my .NET Core 2.1 project to Angular 6 and everything seems to be working correctly except for hot-updates. Before updating it was possible to update the TypeScript and VS would re-compile and reload the browser, now that seems to be broken along with having to manually run ng build to recompile the scripts, VS doesn't seem to recompile automatically anymore.

Is there a setting, possibly in angular.json that I need to set to enable the development server?

Update

For some reason, Hot Updates started working temporarily and not sure what I did to get it to start/stop working. When I start a debug session and update any of the .ts files, I can see the compiler output succeeding but when I refresh my browser I don't see any of the changes unless I manually build the project using the ng build.

I am starting to think that there is some miscommunication going on somewhere or possibly an error somewhere that isn't being picked up by the compiler causing something not to update?

Another thing I noticed while watching my output window is my site starts running on localhost:44359 but in the output, it says Angular Live Development Server is listening on localhost:55287 should these ports match?

one last observation I have made is after a change has been made during a debug session the output window lists all the chunks just like when running it manually with the exception it outputs i ｢wdm｣: Compiled successfully could something be corrupt or is this simply an output bug?

Answer 1

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.