开发服务器热更新不起作用答案

【问题标题】：Development Server hot updates not working开发服务器热更新不起作用
【发布时间】：2018-11-24 19:34:31
【问题描述】：

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

是否有我需要设置的设置（可能在 angular.json 中）以启用开发服务器？

更新

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

我开始认为某处发生了一些误传，或者编译器没有发现某处的错误导致某些内容无法更新？

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

我所做的最后一个观察是在调试会话期间进行更改后，输出窗口列出了所有块，就像手动运行它时一样，除了它输出 i ∩╜ówdm∩╜ú: Compiled successfully 可能有什么损坏或者这只是一个输出错误？

【问题讨论】：

标签： visual-studio-2017 asp.net-core-2.0 angular6

【解决方案1】：

经过大量的折腾，我终于得到了这个工作，并想我会分享发生了什么。

当您运行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 服务，使热更新看起来不再有效。这将导致完全疯狂，因为在服务关闭之前不会加载任何更改或更新。

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

关闭 VS 后，确保在任务管理器中关闭 VSCompiler.exe、任何额外的 Console Windows Host（Angular 服务器，而不是在 SQL 用户下运行的服务器，即 MSSQLFDLauncher...）和任何 Visual Studio 服务。

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

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

ng update 
npm update
npm rebuild
npm install

默认的 .json 文件应该可以从包中直接使用，尝试恢复到那些以检查您的配置。删除dist 文件夹基本上是上面的一个快捷方式（减去实际输出，让VS在Debug之前编译），强制角度重新编译所有内容，但请记住，如果服务被挂起，不管你做什么直到该服务停止为止。

【讨论】：

谢谢一百万。已经搞砸了几个小时。实际上，我需要从 Visual Studio 的解决方案资源管理器中删除 dist 文件夹。从文件系统中删除它是不够的。
去掉最后一部分。看起来从文件系统中删除它也可以。
@Alex FYI 您可以在解决方案资源管理器中隐藏和显示文件和目录，这将显示文件系统上的所有内容。只需选择一个项目，然后在解决方案资源管理器工具栏上单击“显示所有文件”（图标看起来像“全部折叠”旁边的 3 页）
谢谢大家 - 也浪费了大量的时间来修复这个问题。删除 clientApp/Dist 文件夹是我唯一要做的。

【解决方案2】：

简短回答。

删除 ClientApp 文件夹中的“Dist”文件夹。在 VisualStudio 中

和重启和运行

【讨论】：

最佳答案，它拯救了我的一天！

【解决方案3】：

我也遇到了同样的问题。

你有两个选择：

删除“dist”文件夹（每次使用“ng-build”时都会重新创建该文件夹）
使实现与下面的链接相同。此实现使应用程序忽略 dist 文件夹。它只会在生产环境中使用。

Implementation

我认为第二种解决方案更好，因为您不必每次要调试应用程序时都删除“dist”文件夹。

【讨论】：