7

Im having issues with setting up GRPC inside Angular Universal App.

Basically, it throws an error:

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

This error is breaking the application on production (hosting it on ubuntu and nginx), but, in local envioroment it works.

If I switch Angular to not use SSR, then it works fine.

My assumption is that in the Node Express server I need to add support for GRPC, but im not sure how to achieve that.

Did someone had the same problem?

Thanks!

Vulovic Vukasin
  • 1,540
  • 2
  • 21
  • 30
  • If no grpc library is added, adding [improbable-eng](https://www.npmjs.com/package/@improbable-eng/grpc-web-node-http-transport) should solve the issue with the correct transport protocol. – Constantin Konstantinidis Sep 26 '21 at 15:12
  • Sounds like this is not related to gRPC. You're performing ajax calls from the angular app. These calls also happen during ssr. Some environments (eg. Plesk) don't allow this. What backend stack are you using? In ASP.NET Core you must use the `SupplyData` delegate for this. – Pieterjan Sep 27 '21 at 06:39
  • @Pieterjan In .net Core i just installed the standard GRPC template and that is it, I used some kind of middleware to pass the web grpc requests, but that is it. But how is it then working when there is no SSR, meaning when im just running plain angular? – Vulovic Vukasin Sep 27 '21 at 08:55
  • Because when SSR is enabled, node on your server will send ajax calls too. During debugging with Visual Studio this is not a problem. On my Plesk environment this is not allowed, and therefor blocked (probably by the firewall...). On the other hand, ajax calls from any visitor's webbrowser to your WebApi are allowed to be processed. With .net core, you need to use the [`SupplyData`](https://github.com/MintPlayer/MintPlayer/blob/master/MP.Web/Startup.cs#L727) delegate, which brings additional challenges, since you need to know what data is to be rendered. Just look at the code in the link. – Pieterjan Sep 27 '21 at 12:22
  • In case your angular app doesn't send ajax calls and the problem is related to gRPC: during ssr, there's no point in establishing a gRPC connection. So just add a provider `{ provide: 'SERVER_SIDE', useValue: false },` to `main.ts` and a provider `{ provide: 'SERVER_SIDE', useValue: true },` to `main.server.ts`. Then you can `@Inject('SERVER_SIDE') serverSide: boolean` wherever you need, and only establish the gRPC connection `if (serverSide === false)` – Pieterjan Sep 27 '21 at 12:38

1 Answers1

0

If no grpc library is defined, adding improbable-eng should solve the issue. The mentioned error message occurs when the transport protocol is not NodeHttpTransport.

Constantin Konstantinidis
  • 1,307
  • 12
  • 15