带有 GRPC 的 Angular 通用答案

【问题标题】：Angular Universal with GRPC带有 GRPC 的 Angular 通用
【发布时间】：2021-11-10 12:16:36
【问题描述】：

我在 Angular Universal App 中设置 GRPC 时遇到问题。

基本上，它会抛出一个错误：

ERROR Error: This environment's XHR implementation cannot support binary transfer.

这个错误正在破坏生产中的应用程序（将它托管在 ubuntu 和 nginx 上），但是在本地环境中它可以工作。

如果我将 Angular 切换为不使用 SSR，那么它可以正常工作。

我的假设是在 Node Express 服务器中我需要添加对 GRPC 的支持，但我不确定如何实现。

有人遇到过同样的问题吗？

谢谢！

【问题讨论】：

如果没有添加 grpc 库，添加 improbable-eng 应该可以使用正确的传输协议解决问题。
听起来这与 gRPC 无关。您正在从 Angular 应用程序执行 ajax 调用。这些调用也发生在 ssr 期间。某些环境（例如 Plesk）不允许这样做。您使用的是什么后端堆栈？在 ASP.NET Core 中，您必须为此使用 SupplyData 委托。
@Pieterjan 在 .net Core 中我刚刚安装了标准 GRPC 模板，仅此而已，我使用某种中间件来传递 Web grpc 请求，仅此而已。但是当没有 SSR 时它是如何工作的，这意味着当我只是运行普通的角度时？
因为启用 SSR 后，服务器上的节点也会发送 ajax 调用。在使用 Visual Studio 进行调试期间，这不是问题。在我的 Plesk 环境中，这是不允许的，因此被阻止（可能被防火墙...）。另一方面，允许处理从任何访问者的网络浏览器到您的 WebApi 的 ajax 调用。使用 .net 核心，您需要使用 SupplyData 委托，这带来了额外的挑战，因为您需要知道要呈现哪些数据。只需查看链接中的代码即可。
如果您的 Angular 应用程序不发送 ajax 调用并且问题与 gRPC 有关：在 ssr 期间，建立 gRPC 连接没有意义。所以只需将提供者{ provide: 'SERVER_SIDE', useValue: false }, 添加到main.ts 并将提供者{ provide: 'SERVER_SIDE', useValue: true }, 添加到main.server.ts。然后你可以在任何你需要的地方@Inject('SERVER_SIDE') serverSide: boolean，并且只建立gRPC连接if (serverSide === false)

标签： node.js angular grpc server-side-rendering grpc-web

【解决方案1】：

如果没有定义 grpc 库，添加 improbable-eng 应该可以解决问题。当传输协议不是NodeHttpTransport 时会出现上述错误消息。

【讨论】：

但是应该将 improbable-eng 添加到 angular 还是添加到正在服务 angular 的节点？
使用常用的安装命令将 Andular 作为依赖项。引用的页面提供了一个示例。
但是，我需要看看如何在 grpc web typescript 实现中实际使用它，因为这是用于纯 javascript，不是吗？
问题是关于 Angular 的。如果使用 Angular 像往常一样部署 Angular 依赖项，则不应该有其他任何阻碍。报告的错误信息是从Angular代码（Typescript）see返回的。