SignalR Message Pack Client Library not running in browser when using Angular Cli

[QuinntyneBrown]

After importing MessagePackHubProtocol from @aspnet/signalr-protocol-msgpack inside of an Angular app using the Angular cli, the application will no longer run in the browser.

You will see the following exception in the console.

Steps to reproduce the behavior:

Clone and run the following app:
https://github.com/QuinntyneBrown/ng-signalr-protocol-msgpack-issue

or

1. Create an angular app using the angular cli

2. npm install @aspnet/signalr and @aspnet/signalr-protocol-msgpack

3. In the app component, import HubConnectionBuilder from @aspnet/signalr

4. In the app component, import MessagePackHubProtocolfrom @aspnet/signalr-protocol-msgpack

5. In the app component, add a method called ngOnInit

6. Inside the ngOnInit method, add the following code

   var connection = new HubConnectionBuilder()
   .withUrl("")
   .withHubProtocol(new MessagePackHubProtocol())
   .build();

7. run the app with the console open, and you should see the error. The UI will be blank.

Expected behavior

You should see the standard angular cli default page.

[QuinntyneBrown]

I created the following duplicate issue with angular-cli.

angular/angular-cli#14253

I was asked to look at the following comment. angular/angular-cli#9827 (comment)

[BrennanConroy]

Take a look at aspnet/SignalR#2736 (comment) for a workaround.

triage we can investigate using a newer Buffer package that doesn't rely on global being defined.

[dcarr42]

Angular broke this intentionally. angular/angular-cli#9827 (comment)

…

On Wed, 24 Apr 2019, 16:36 BrennanConroy, ***@***.***> wrote: Take a look at aspnet/SignalR#2736 (comment) <aspnet/SignalR#2736 (comment)> for a workaround. @*triage* we can investigate using a newer Buffer package that doesn't rely on global being defined. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#9687 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADKSKTFHCMCSIF46BZ2FAU3PSB46JANCNFSM4HH4KWKQ> .

[mhosman]

Same error here!!!

[analogrelay]

We'll look and see if there's a good option here. We might end up dropping polyfills for some of these altogether so that each environment can bring an appropriate polyfill.

[analogrelay]

We aren't going to be able to get to this in 3.0. Moving to the backlog.

[mhosman]

So... You're gonna release a version that is not working with Angular?

[analogrelay]

Is the linked workaround insufficient for you? If so we can bump the priority of this.

[mhosman]

Sorry, @anurse I didn't see that workaround!

[cyraid]

The workaround worked for me after I added the package "buffer" to package.json.
Edit: Gotta be something better than doing all this to make MessagePack work lol

[davidfowl]

Does this repro with the latest changes? @BrennanConroy We changed the msg pack library so I wonder if the same issue exists.

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. Because it's not immediately obvious that this is a bug in our framework, we would like to keep this around to collect more feedback, which can later help us determine the impact of it. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[BrennanConroy]

This might be fixed, I'll try it out and see if the issue is gone.

[BrennanConroy]

Doesn't look like the issue repros with the new messagepack library.

[philippseith]

@BrennanConroy I stlill got errors when using @microsoft/signalr-protocol-msgpack with angular 11.
Uncaught ReferenceError: global is not defined
and after fixing that
Uncaught ReferenceError: Buffer is not defined

I had to install the buffer package and add this to polyfill.js (from https://stackoverflow.com/a/64042896)

import * as Buffer from '../node_modules/buffer/index';
// Fix Uncaught ReferenceError: global is not defined
(window as any).global = window;
// Fix Uncaught ReferenceError: Buffer is not defined
(window as any).process = {};
(window as any).process = window;
(window as any).process.browser = true;
(window as any).process.version = '';
(window as any).process.versions = { node: false };
(window as any).global.Buffer = Buffer.Buffer;

[BrennanConroy]

Are you using the 6.0 preview version of the package?

[philippseith]

5.0.9

[BrennanConroy]

The 6.0+ version of the library doesn't have this issue.

5.0 and below will need to apply a workaround such as aspnet/SignalR#2736 (comment) or the one you listed.