visual-studio-2017 - 开发服务器热更新不起作用

Question

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

我需要设置一个设置(可能在 angular.json 中)来启用开发服务器吗？

更新

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

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

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

我最后观察到的是，在调试 session 期间进行更改后，输出窗口会列出所有 block ，就像手动运行它时一样，但它会输出 i ｢wdm｣: Compiled successfully 。可能有什么东西被损坏了或者这只是一个输出错误？

Answer 1

经过一番折腾后，我终于成功了，并想分享一下正在发生的事情。

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

因此，如果您开始遇到同样的问题，幸运的是，有一个简单的解决方法，只需在启动调试 session 之前删除 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 之前编译)，强制 Angular 重新编译所有内容，但请记住，如果服务挂起，它会赢在该服务停止之前，无论您做什么。