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

问题描述

我将我的 .NET Core 2.1 项目升级到了 Angular 6，除了热更新外，一切似乎都正常工作.在更新之前，可以更新 TypeScript 并且 VS 会重新编译并重新加载浏览器，现在这似乎被打破了，必须手动运行 ng build 来重新编译脚本，VS 不会似乎不再自动重新编译了.

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.

是否有一个设置，可能在 angular.json 中，我需要设置以启用开发服务器?

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

出于某种原因，热更新暂时开始工作，但不确定我做了什么让它开始/停止工作.当我开始调试会话并更新任何 .ts 文件时，我可以看到编译器输出成功，但是当我刷新浏览器时，我看不到任何更改，除非我使用 ng build 手动构建项目.

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?

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

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?

我所做的最后一个观察是在调试会话期间进行更改后，输出窗口会列出所有块，就像手动运行时一样，但它输出的是i∩╜ówdm∩╜ú:已编译成功 可能是某些东西损坏了还是只是一个输出错误?

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.

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

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.

因此，如果您幸运地开始遇到同样的问题，那么有一个简单的解决方法，只需在启动调试会话之前删除 ClientApp/dist 文件夹.Visual Studio 将在后台编译文件，当您更新源文件或样式表时，您的浏览器应自动刷新.

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.

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

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):

   "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 结束)，然后每次更改它将更新的源文件之一.我添加了调试"，因为我不确定它是否会干扰生产，如果可以作为备份，保持现有或默认设置总是安全的.

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.

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

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

spa.UseAngularCliServer(npmScript: "debug");

<小时>

更新 - 2

我在使用 Angular 和 VS (2017) 时发现的另一件事是，如果您的代码中某处碰巧有 cli 编译器未发现的错误，尤其是在任何构造函数或 ngOnInit() 中功能，它会在关闭后挂起 Angular 服务，使热更新看起来不再起作用.这将导致完全疯狂，因为在服务关闭之前不会加载任何更改或更新.

---

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.

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

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

关闭 VS 后，确保 VSCompiler.exe、任何额外的 Console Windows Host(Angular Server，不是在 SQL 用户下运行的，即 MSSQLFDLauncher... ) 并且所有 Visual Studio 服务都在您的任务管理器中关闭.

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.

我意识到实际上是我的代码中的一个错误导致一切停止工作或根本不工作.Angular 和 .NET 不会总是抛出错误，有时错误会被简单地跳过(尤其是当有语法错误时)或在所有其他输出中间输出.

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.

如果事情停止工作，很可能是由于错误或其他一些原因导致编译器停止响应.最后一个需要仔细检查的区域是您的 package.json 和 angular.json，尤其是任何路径，然后运行以下命令并留意输出以获取需要更新的更新制作:

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

默认的 .json 文件应该可以在包中正常工作，请尝试恢复到这些文件以检查您的配置.删除dist文件夹基本上就是上面的一个快捷方式(减去实际输出，让VS在Debug之前编译)，强制angular重新编译所有东西但要记住，如果服务挂了，它就赢了在该服务停止之前，您做什么都无所谓.

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屋！