开发服务器热更新不起作用 [英] Development Server hot updates not working

问题描述

我将.NET Core 2.1项目升级到Angular 6，除了热更新以外，其他所有东西似乎都可以正常工作.在更新之前，可以更新TypeScript，并且VS将重新编译并重新加载浏览器，现在看来这已经被打破了，而必须手动运行ng build来重新编译脚本，VS似乎不再能够自动重新编译.

要启用开发服务器，是否需要在angular.json中进行设置?

更新

由于某些原因，Hot Updates暂时开始工作，并且不确定如何使它开始/停止工作.当我开始调试会话并更新任何.ts文件时，可以看到编译器输出成功，但是当刷新浏览器时，除非使用ng build手动构建项目，否则我看不到任何更改./p>

我开始认为某些地方发生了一些通信错误，或者可能是编译器没有发现某个错误导致某些内容无法更新?

我在观察输出窗口时注意到的另一件事是我的站点开始在localhost:44359上运行，但是在输出中，它说Angular Live Development Server is listening on localhost:55287这些端口应该匹配吗?

我最后观察到的是，在调试会话期间进行了更改之后，输出窗口列出了所有块，就像手动运行时一样，除了它输出i ｢wdm｣: Compiled successfully可能会损坏或仅仅是一个异常输出错误?

解决方案

经过一番混乱之后，我终于开始工作了，并认为我会分享正在发生的事情.

运行ng build时，它将编译并输出到ClientApp/dist文件夹.当您启动调试会话时，您的项目将使用此版本.如果在运行时更改文件，它将重新编译文件，但不会覆盖dist目录中的已编译文件.我认为因为文件是在UI外部手动生成的，所以VS认为它不能覆盖它们.

因此，幸运的是，如果开始遇到相同的问题，这里有一个简单的修复方法，只需删除ClientApp/dist文件夹，然后再开始调试会话. Visual Studio将在后台编译文件，并且当您更新源文件或样式表时，浏览器应自动刷新.

更新

我发现的另一件事是，如果您需要手动运行ng build，还有另一种方法可以使文件至少保持最新(需要重新加载):

package.json

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

然后运行ng build --watch而不是ng build，这将使提示符进入监视模式(按ctrl c键结束)，然后每次更改其中一个源文件时，它将更新.我添加了调试"，是因为我不确定它是否会干扰生产，如果可以备份，始终可以保持现有状态或默认状态.

然后在Startup.cs(Configure(…))中将服务器更新为使用新的调试":

spa.UseAngularCliServer(npmScript: "debug");

---

更新-2

我在使用Angular和VS(2017)时发现的另一件事是，如果您碰巧在cli编译器未拾取的代码中出现错误，尤其是在任何构造函数或ngOnInit()中函数，即使关闭后它也会挂断Angular Service，这使得热更新似乎不再起作用.这将导致完全的Madness，因为在关闭服务之前，不会加载任何更改或更新.

另一个可能的原因是编译.scss或Angular时出错.在输出"窗口中检查是否有任何Angular-cli错误或在浏览器输出中.

在关闭VS之后，请确保在任务管理器中关闭了VSCompiler.exe，任何其他Console Windows Host(Angular Server，而不是在SQL用户下运行的服务器，即MSSQLFDLauncher ...)和所有Visual Studio服务.

我意识到这实际上是我的代码中的错误，导致所有内容停止工作或根本不工作. Angular和.NET不会总是抛出错误，有时会跳过这些错误(特别是在出现语法错误时)，或者在所有其他输出中间输出该错误.

很有可能是事情停止了，这是由于错误或其他原因导致了编译器停止响应.最后一个需要仔细检查的区域是您的package.json和angular.json，尤其是任何路径，然后运行以下命令并关注输出以进行需要进行的更新:

ng update 
npm update
npm rebuild
npm install

默认的.json文件应该可以直接从软件包中使用，请尝试恢复为默认文件以检查您的配置.删除dist文件夹基本上是上述操作的快捷方式(减去实际输出，让VS在Debug之前进行编译)，迫使Angular重新编译所有内容，但请记住，如果服务已挂起，则不管您做什么直到该服务停止.

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?

解决方案

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.

这篇关于开发服务器热更新不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！