Development Server热更新无法正常工作

Question

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

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

更新

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

我开始认为某些地方存在一些误传,或者某个地方可能出现错误而导致某些内容无法更新？

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

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

Answer 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(...))中更新服务器以使用新的"debug":

spa.UseAngularCliServer(npmScript: "debug");

更新 - 2

我在使用Angular和VS(2017)时发现的另一件事是,如果碰巧在代码中的某个地方出现了错误,而cli编译器没有这个错误,特别是在任何构造函数或ngOnInit()函数中,即使在关机后,它也会挂起Angular服务,这使得热更新似乎不再有效.这将导致完全疯狂,因为在服务关闭之前不会加载任何更改或更新.

另一个可能的原因是编译.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重新编译所有内容,但请记住,如果服务挂断,那么你做什么都没关系服务已停止.