MessagePackHubProtocol error in Angular

[andreatosato]

• Versions of Server-Side NuGet Packages:
  Microsoft.AspNetCore.SignalR.Core: 1.0.2
  Microsoft.AspNetCore.SignalR.Protocols.MessagePack: 1.0.2
• Versions of Client-Side NuGet/NPM Packages:
  @aspnet/signalr: 1.0.2
  @aspnet/signalr-protocol-msgpack: 1.0.2
• Are you using the C# client or the JavaScript client:
  Javascript
• The Server you are using (Kestrel/HttpSysServer/IIS/IIS Express/Azure Web App/etc.):
  IIS Express
• The Operating System on the Server (Windows/Linux/macOS):
  Windows
• The Operating System on the Client (Windows/Linux/macOS):
  Windows
• The Browser on the client, if using the JavaScript client (IE/Chrome/Edge/Firefox/etc.):
  Chrome

Angular error:

Uncaught ReferenceError: global is not defined
    at Object../node_modules/buffer/index.js (index.js:43)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@aspnet/signalr-protocol-msgpack/dist/esm/MessagePackHubProtocol.js (vendor.js:61966)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@aspnet/signalr-protocol-msgpack/dist/esm/index.js (vendor.js:62173)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/services/chatHub.service.ts (chat.service.ts:10)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/home/home.component.ts (main.js:595)
    at __webpack_require__ (bootstrap:76)

Client Side

private connection: HubConnection;
...
this.connection = new HubConnectionBuilder()
      .withUrl(environment.baseHubs + '/chat', {
            accessTokenFactory: () => token,
            logger: LogLevel.Trace
      })
      .withHubProtocol(new MessagePackHubProtocol())
      .build();

Server Side

 services.AddSignalR(config => config.EnableDetailedErrors = true)
              .AddMessagePackProtocol()
              .AddAzureSignalR();
...
 app.UseAzureSignalR(map =>
        {
                map.MapHub<ChatHub>("/chat");
        });

When I change protocol to Json all work fine:
Client Side

this.connection = new HubConnectionBuilder()
      .withUrl(environment.baseHubs + '/chat', {
            accessTokenFactory: () => token,
            logger: LogLevel.Trace
      })
      .withHubProtocol(new JsonHubProtocol())
      .build();

Server Side

 services.AddSignalR(config => config.EnableDetailedErrors = true)
              .AddJsonProtocol(config => config.PayloadSerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver())
              .AddAzureSignalR();
...
 app.UseAzureSignalR(map =>
        {
                map.MapHub<ChatHub>("/chat");
        });

[analogrelay]

Can you provide your webpack configuration? When using SignalR as a node module (via something like WebPack) it expects to be in a Node environment (where things like global are defined). WebPack is supposed to automatically shim those things though.

[andreatosato]

this is my project: https:/andreatosato/RealTime/tree/master/ChatPWA/chat-app
Project is for conference sessions.
I tried to add in polyfills.ts:

(window as any).global = window;

The introduction of the line of code indicates a new error with messagepack.

This is my experiments:
1 experiment

(window as any).global = window;

2 experiment

(window as any).process = {
    env: { DEBUG: undefined },
};

Ref project

[BrennanConroy]

Could you give step-by-step instructions on how to run the app and hit the issue?

[andreatosato]

With last commit, I migrate from Json to MessagePack protocol.
I insert polyfills rules with (window as any).global = window;

Step to reproduce error:

1. Run client Angular App with angular-cli running powershell command: ng serve
2. Run server ASP .NET Core app

[BrennanConroy]

Yeah, I figured out those steps, but how do you actually hit the issue? It ran fine, but there is no SignalR code running in the browser.

[andreatosato]

excuse me for the misunderstanding.
I encounter the problem at runtime when running the following line of code:

this.connection = new HubConnectionBuilder()
      .withUrl(environment.baseHubs + '/chat', {
            accessTokenFactory: () => token,
            logger: LogLevel.Trace
      })
      .withHubProtocol(new MessagePackHubProtocol())
      .build();

The strange thing is that code breaks before running start() method.
It looks like a Typescript/Javascript problem in the package: @aspnet/signalr-protocol-msgpack

[BrennanConroy]

Got it running by adding more polyfill bits. Just had to follow stackoverflow for a couple more things

(window as any).global = window;

(window as any).process = {
    env: { DEBUG: undefined },
    version: "1",
};
global.Buffer = global.Buffer || require('buffer').Buffer;

https://stackoverflow.com/questions/50371593/angular-6-uncaught-referenceerror-buffer-is-not-defined

[andreatosato]

Wow, great! Thanks a lot! @BrennanConroy

Complete resolution:
index.html

<head>
 <script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
  </script>
</head>

polyfills.ts

(window as any).global = window;
(window as any).process = {
    env: { DEBUG: undefined },
    version: '1',
};