开发服务器热更新不工作
Development Server hot updates not working
我将我的 .NET Core 2.1 项目升级到 Angular6,除了热更新之外,一切似乎都正常工作。在更新之前可以更新 TypeScript 并且 VS 会重新编译并重新加载浏览器,现在这似乎已经被打破并且必须手动 运行 ng build
来重新编译脚本,VS 不会似乎不再自动重新编译了。
是否有我需要设置的设置(可能在 angular.json 中)才能启用开发服务器?
更新
出于某种原因,热更新暂时开始工作,但不确定我做了什么才能使其 start/stop 工作。当我启动调试会话并更新任何 .ts 文件时,我可以看到编译器输出成功但是当我刷新浏览器时我看不到任何更改,除非我使用 ng build
手动构建项目.
我开始认为是某处发生了一些错误的沟通,或者可能是某处的错误未被编译器拾取导致某些内容无法更新?
我在观察我的输出 window 时注意到的另一件事是我的网站在 localhost:44359 上启动 运行ning 但在输出中,它说 Angular Live Development Server is listening on localhost:55287
这些端口是否匹配?
我最后一次观察是在调试会话期间进行更改后,输出 window 列出了所有块,就像 运行 手动设置它时一样,但它输出异常 i ∩╜ówdm∩╜ú: Compiled successfully
可能是什么东西损坏了,或者这只是一个输出错误?
经过大量的折腾,我终于开始工作了,我想我会分享正在发生的事情。
当你 运行 ng build
它编译并输出到 ClientApp/dist
文件夹。当您启动 Debug Session 时,您的项目将使用此版本。如果您在 运行 时更改文件,它将 re-compile 文件但不会覆盖 dist
目录中的已编译文件。我认为因为文件是在 UI 之外手动生成的,VS 认为它无法覆盖它们。
因此,如果您开始 运行遇到同样的问题,幸运的是有一个简单的解决方法,只需 删除 ClientApp/dist
文件夹 ,然后再开始调试Session。 Visual Studio 将在后台编译文件,当您更新源文件或样式时 sheet 您的浏览器应自动刷新。
更新
我发现的另一件事是,如果您需要手动 运行 ng build
,还有另一种方法可以至少保留文件 up-to-date(需要重新加载):
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 结束),然后每次更改其中一个源文件它会更新。我添加了 "debug",因为我不确定它是否会扰乱生产,如果可以作为备份,保持现有或默认的东西总是安全的。
然后在 Startup.cs (Configure(…)) 中更新服务器以使用新的 "debug":
spa.UseAngularCliServer(npmScript: "debug");
更新 - 2
我在使用 Angular 和 VS (2017) 时发现的另一件事是,如果您的代码中某处碰巧有错误,但 cli 编译器未发现该错误,尤其是在任何构造函数或 ngOnInit() 函数,即使在关闭后它也会挂断 Angular 服务,使 hot-updates 看起来好像不再工作了。这将导致完全疯狂,因为 none 的更改或更新将被加载,直到服务关闭。
另一个可能的原因是编译.scss 或Angular 时出错。检查 "Output" window 是否有任何 Angular-cli 错误或在浏览器输出中。
关闭VS后,确保VSCompiler.exe
,任何额外的Console Windows Host
(Angular服务器,而不是SQL下的那个运行ning用户即 MSSQLFDLauncher... ) 和任何 Visual Studio 服务在您的任务管理器中关闭。
我意识到实际上是我的代码中的错误导致一切停止工作或根本不工作。 Angular 和 .NET 不会总是抛出错误,有时错误会被简单地跳过(特别是当存在语法错误时)或在所有其他输出中输出。
如果事情停止工作,很可能是因为错误或其他原因导致编译器停止响应。最后一个要仔细检查的区域是您的 package.json
和 angular.json
,尤其是任何路径,然后 运行 以下内容并留意需要进行更新的输出:
ng update
npm update
npm rebuild
npm install
默认的 .json 文件应该可以直接从包中取出,尝试恢复到那些文件以检查您的配置。删除dist
文件夹基本上是上面的快捷方式(减去实际输出,让VS在Debug之前编译),强制angular重新编译一切但要记住,如果服务挂了,它在该服务停止之前,您做什么都无所谓。
简答。
删除 ClientApp 文件夹中的 'Dist' 文件夹。在 VisualStudio 中
和重启和运行
我也遇到过同样的问题。
您有两个选择:
- 删除"dist"文件夹(每次使用'ng-build'时都会重新创建该文件夹)
- 使实现等于下面的 link。此实现使应用程序忽略 dist 文件夹。它只会在生产环境中使用。
Implementation
我认为第二种解决方案更好,因为您不必在每次调试应用程序时都删除 "dist" 文件夹。
我将我的 .NET Core 2.1 项目升级到 Angular6,除了热更新之外,一切似乎都正常工作。在更新之前可以更新 TypeScript 并且 VS 会重新编译并重新加载浏览器,现在这似乎已经被打破并且必须手动 运行 ng build
来重新编译脚本,VS 不会似乎不再自动重新编译了。
是否有我需要设置的设置(可能在 angular.json 中)才能启用开发服务器?
更新
出于某种原因,热更新暂时开始工作,但不确定我做了什么才能使其 start/stop 工作。当我启动调试会话并更新任何 .ts 文件时,我可以看到编译器输出成功但是当我刷新浏览器时我看不到任何更改,除非我使用 ng build
手动构建项目.
我开始认为是某处发生了一些错误的沟通,或者可能是某处的错误未被编译器拾取导致某些内容无法更新?
我在观察我的输出 window 时注意到的另一件事是我的网站在 localhost:44359 上启动 运行ning 但在输出中,它说 Angular Live Development Server is listening on localhost:55287
这些端口是否匹配?
我最后一次观察是在调试会话期间进行更改后,输出 window 列出了所有块,就像 运行 手动设置它时一样,但它输出异常 i ∩╜ówdm∩╜ú: Compiled successfully
可能是什么东西损坏了,或者这只是一个输出错误?
经过大量的折腾,我终于开始工作了,我想我会分享正在发生的事情。
当你 运行 ng build
它编译并输出到 ClientApp/dist
文件夹。当您启动 Debug Session 时,您的项目将使用此版本。如果您在 运行 时更改文件,它将 re-compile 文件但不会覆盖 dist
目录中的已编译文件。我认为因为文件是在 UI 之外手动生成的,VS 认为它无法覆盖它们。
因此,如果您开始 运行遇到同样的问题,幸运的是有一个简单的解决方法,只需 删除 ClientApp/dist
文件夹 ,然后再开始调试Session。 Visual Studio 将在后台编译文件,当您更新源文件或样式时 sheet 您的浏览器应自动刷新。
更新
我发现的另一件事是,如果您需要手动 运行 ng build
,还有另一种方法可以至少保留文件 up-to-date(需要重新加载):
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 结束),然后每次更改其中一个源文件它会更新。我添加了 "debug",因为我不确定它是否会扰乱生产,如果可以作为备份,保持现有或默认的东西总是安全的。
然后在 Startup.cs (Configure(…)) 中更新服务器以使用新的 "debug":
spa.UseAngularCliServer(npmScript: "debug");
更新 - 2
我在使用 Angular 和 VS (2017) 时发现的另一件事是,如果您的代码中某处碰巧有错误,但 cli 编译器未发现该错误,尤其是在任何构造函数或 ngOnInit() 函数,即使在关闭后它也会挂断 Angular 服务,使 hot-updates 看起来好像不再工作了。这将导致完全疯狂,因为 none 的更改或更新将被加载,直到服务关闭。
另一个可能的原因是编译.scss 或Angular 时出错。检查 "Output" window 是否有任何 Angular-cli 错误或在浏览器输出中。
关闭VS后,确保VSCompiler.exe
,任何额外的Console Windows Host
(Angular服务器,而不是SQL下的那个运行ning用户即 MSSQLFDLauncher... ) 和任何 Visual Studio 服务在您的任务管理器中关闭。
我意识到实际上是我的代码中的错误导致一切停止工作或根本不工作。 Angular 和 .NET 不会总是抛出错误,有时错误会被简单地跳过(特别是当存在语法错误时)或在所有其他输出中输出。
如果事情停止工作,很可能是因为错误或其他原因导致编译器停止响应。最后一个要仔细检查的区域是您的 package.json
和 angular.json
,尤其是任何路径,然后 运行 以下内容并留意需要进行更新的输出:
ng update
npm update
npm rebuild
npm install
默认的 .json 文件应该可以直接从包中取出,尝试恢复到那些文件以检查您的配置。删除dist
文件夹基本上是上面的快捷方式(减去实际输出,让VS在Debug之前编译),强制angular重新编译一切但要记住,如果服务挂了,它在该服务停止之前,您做什么都无所谓。
简答。
删除 ClientApp 文件夹中的 'Dist' 文件夹。在 VisualStudio 中
和重启和运行
我也遇到过同样的问题。
您有两个选择:
- 删除"dist"文件夹(每次使用'ng-build'时都会重新创建该文件夹)
- 使实现等于下面的 link。此实现使应用程序忽略 dist 文件夹。它只会在生产环境中使用。
Implementation
我认为第二种解决方案更好,因为您不必在每次调试应用程序时都删除 "dist" 文件夹。