.net core 3.1 中的 Angular 似乎不再支持实时重新加载
Live reloading no longer seems to work with Angular in .net core 3.1
我正在尝试在 Visual Studio 2019 年构建一个全新的 ASP.NET 核心 Web 应用程序,其中包含一个针对 ASP.NET 核心 3.1 的 Angular 模板。
虽然应用程序可以运行,但实时重新加载只会在中断前运行一两次,然后无论您是对 .ts 文件还是 .html 文件进行更改,它都会完全停止运行。关闭 Visual Studio 然后使用任务管理器关闭 Node.js 的实例有时会使它再次工作,但如果幸运的话,它只会在再次中断之前进行一次或两次实时重新加载。
我可以看出,每次我保存更改时,Angular CLI 都会重新编译我的代码,因为我所要做的就是单击浏览器中的地址栏,然后按回车键以查看我的更改是否得到反映。因此,这似乎主要是尝试向浏览器发送刷新命令失败。
我试图缩小这个问题范围的事情:
正在将 ClientApp 文件夹中我的 Angular 版本升级到 9.1 或降级到 5.2.0。在这两种情况下,我仍然会遇到实时重新加载错误。它似乎与使用的 Angular 版本无关,而是与我定位的 .net 核心版本有关。
使用命令提示符启动我的 Angular 项目 (npm start),然后访问 localhost:4200 - 在这种情况下,每次我保存对文件的更改时,实时重新加载都会起作用在我的 ClientApp 文件夹中 - 但我已经有效地将 .net 核心从这里的循环中删除。在这种情况下,我不再使用 ASP.NET Core 来提供我的 Angular SPA。
使用命令提示符启动我的 Angular 项目 (npm start),然后按以下方式编辑我的 Startup.cs:
if (env.IsDevelopment())
{
//spa.UseAngularCliServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
}
Live 重新加载错误在这种情况下仍然存在
- 在 Visual Studio 2019 年使用 Angular 模板搭建一个新的 ASP.NET 核心 Web 应用程序,但这次的目标是 ASP.NET 核心 2.1。这次实时重新加载完美无缺,这证实了我的理论,即这与目标 .net 核心版本有关。它搭建了一个 Angular 5.2.0 SPA,但您可以将其换成 Angular 9.1 SPA,浏览器的实时重新加载仍然有效。
是否有其他人遇到过此问题或找到了解决方法?我真的很想在 .net core 3 中开始我的新项目,但我担心它有问题并且目前不能很好地与 Angular 一起使用。
编辑
我不知道它是否相关,但此问题在 Internet Explorer 中的显示略有不同。在IE中,反复调出控制台,反复出现以下脚本错误
Invalid Host/Origin header
[WDS] Disconnected!
这些脚本错误在使用较旧的 Angular 框架 (5.2.0) 时消失,但在这种情况下,只要我使用 ASP.NET Core 3.1[=,实时重新加载仍然不起作用16=]
也可以使用
来防止这些脚本错误
"disableHostCheck": true
(angular.json -> 架构师 -> 服务 -> 选项)
或
"start": "ng serve --configuration es5 --disable-host-check"
(package.json)
但这不会修复 Internet Explorer 中的实时重新加载
看来这个错误已经发布在这里:
https://github.com/dotnet/aspnetcore/issues/11498
用户 Cito 发布了一个有效的解决方案:
https://github.com/dotnet/aspnetcore/issues/11498#issuecomment-566928086
要使实时重新加载正常工作,请确保在您的网络服务器设置中启用 SSL。我不确定为什么实时重新加载只能通过 SSL 在 .NET Core 3.1 中工作,但它确实如此。
如果有人有任何理论,我很想知道为什么这可以解决问题
我正在尝试在 Visual Studio 2019 年构建一个全新的 ASP.NET 核心 Web 应用程序,其中包含一个针对 ASP.NET 核心 3.1 的 Angular 模板。
虽然应用程序可以运行,但实时重新加载只会在中断前运行一两次,然后无论您是对 .ts 文件还是 .html 文件进行更改,它都会完全停止运行。关闭 Visual Studio 然后使用任务管理器关闭 Node.js 的实例有时会使它再次工作,但如果幸运的话,它只会在再次中断之前进行一次或两次实时重新加载。
我可以看出,每次我保存更改时,Angular CLI 都会重新编译我的代码,因为我所要做的就是单击浏览器中的地址栏,然后按回车键以查看我的更改是否得到反映。因此,这似乎主要是尝试向浏览器发送刷新命令失败。
我试图缩小这个问题范围的事情:
正在将 ClientApp 文件夹中我的 Angular 版本升级到 9.1 或降级到 5.2.0。在这两种情况下,我仍然会遇到实时重新加载错误。它似乎与使用的 Angular 版本无关,而是与我定位的 .net 核心版本有关。
使用命令提示符启动我的 Angular 项目 (npm start),然后访问 localhost:4200 - 在这种情况下,每次我保存对文件的更改时,实时重新加载都会起作用在我的 ClientApp 文件夹中 - 但我已经有效地将 .net 核心从这里的循环中删除。在这种情况下,我不再使用 ASP.NET Core 来提供我的 Angular SPA。
使用命令提示符启动我的 Angular 项目 (npm start),然后按以下方式编辑我的 Startup.cs:
if (env.IsDevelopment())
{
//spa.UseAngularCliServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
}
Live 重新加载错误在这种情况下仍然存在
- 在 Visual Studio 2019 年使用 Angular 模板搭建一个新的 ASP.NET 核心 Web 应用程序,但这次的目标是 ASP.NET 核心 2.1。这次实时重新加载完美无缺,这证实了我的理论,即这与目标 .net 核心版本有关。它搭建了一个 Angular 5.2.0 SPA,但您可以将其换成 Angular 9.1 SPA,浏览器的实时重新加载仍然有效。
是否有其他人遇到过此问题或找到了解决方法?我真的很想在 .net core 3 中开始我的新项目,但我担心它有问题并且目前不能很好地与 Angular 一起使用。
编辑
我不知道它是否相关,但此问题在 Internet Explorer 中的显示略有不同。在IE中,反复调出控制台,反复出现以下脚本错误
Invalid Host/Origin header
[WDS] Disconnected!
这些脚本错误在使用较旧的 Angular 框架 (5.2.0) 时消失,但在这种情况下,只要我使用 ASP.NET Core 3.1[=,实时重新加载仍然不起作用16=]
也可以使用
来防止这些脚本错误"disableHostCheck": true
(angular.json -> 架构师 -> 服务 -> 选项)
或
"start": "ng serve --configuration es5 --disable-host-check"
(package.json)
但这不会修复 Internet Explorer 中的实时重新加载
看来这个错误已经发布在这里:
https://github.com/dotnet/aspnetcore/issues/11498
用户 Cito 发布了一个有效的解决方案: https://github.com/dotnet/aspnetcore/issues/11498#issuecomment-566928086
要使实时重新加载正常工作,请确保在您的网络服务器设置中启用 SSL。我不确定为什么实时重新加载只能通过 SSL 在 .NET Core 3.1 中工作,但它确实如此。
如果有人有任何理论,我很想知道为什么这可以解决问题