.NET Core 和 Angular 8 WebSocket 握手错误

Question

我已经用 Angular 8.x 玩了一个星期了。今天我实际上尝试用 Angular 8.x 做一个 .NET Core 应用程序。我在 .NET Core 2.2.x 和 Angular 8.x 上。当我通过 Visual Studio 2019 运行应用程序时，我发现应用程序需要很长时间才能实际加载到网页中，这与单独运行 Angular 不同。我检查了 Chrome 浏览器控制台并看到以下内容：

sockjs.js:1683 WebSocket connection to 'ws://localhost:41211/sockjs-node/909/dtwlrua0/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

我没有强大的网络背景，但我认为这就是问题所在。我该如何解决？

附带说明，这是一个基本的（至少对我而言）应用程序，因此不会进行很多处理。我实际上正在使用this 教程。根据 Visual Studio 中的诊断部分，实际获取要在页面上显示的数据大约需要 35 秒（只是来自 C# Corner RSS Feeds 的帖子列表）。

编辑：我忘了提（但任何使用 .net 核心/角度组合的人都可能会抓住它）。我必须修改使用 .NET Core 应用程序生成的默认 ClientApp。它在 Angular 版本 6 上。我删除了文件夹并使用 angular cli 创建 ClientApp 片段，以便我可以使用 Angular 8.x。

Answer 1

我认为这里有一点概念知识会很有用。 Visual Studio 有这个预先打包好的 Angular 东西（在我看来），它以一种相当笨拙和做作的方式配置，因此几乎可以肯定无法正常工作。

Angular 应用程序是单页应用程序。您根据Angular Site 中记录的过程构建它们，使用Angular CLI 来帮助您完成此过程。当你在开发模式下构建你的应用程序时，它会尝试连接到 webpack 服务器以获得更新通知（因此，当你使用ng serve 时，它会自动重新编译并刷新页面）。此功能在生产版本中不存在 (ng build --prod)。

为 Angular 应用提供服务

从根本上说，就实际 Angular 应用程序本身而言，ASP.Net 项目毫无用处。当您编译 Angular 代码时，ng build 命令会运行 webpack 以及其他进程，生成少量 .css、.js 和一个呈现您的应用程序的 index.html 页面（页面名称可以是配置）。任何能够提供静态文件的 Web 服务器都可以提供 index.html 并因此运行您的应用程序。

但是，大多数 Angular 应用程序都需要某种后端。这是 .NET 核心应用程序可以派上用场的地方。你可以使用HttpClient从你的Angular前端回调你的.NET核心后端。

我的 Angular 应用程序在生产和测试配置中都使用 .Net 核心。对于生产，我有以下内容：

• 在 IIS 中配置的常规站点，能够提供静态文件（用于 Angular 应用程序）
• /api 的虚拟目录托管 ASP.Net 核心 API 项目的打包/发布版本。请注意，此项目与 Angular 应用程序没有硬链接
• 我们在两个项目之间共享了对象定义代码 - 我构建了一个代码生成器，它为 Angular 应用程序生成 Typescript，为基于 NJsonSchema 的后端生成 C#。

为了进行测试/开发，我为 webpack 服务器设置了代理配置。因此，单击 VisualStudio 中的“运行”按钮会启动 API 项目在 localhost:5800 上侦听，ng serve 命令会在 localhost:4200 上启动 Angular webpack 服务器。对localhost:4200/api 的请求被代理到localhost:5800。