Angular SignalR Error during negotiation request

Question

We are trying to use SignalR with Angular 2 and TypeScript. It seems my client side code is not working, especially Establish a connection (without the generated proxy)

I Followed Angular 2 TypeScript using SignalR but I didnt include SignalR/Hubs script path as I want to with out auto generated proxy as I don't see any auto generated proxy classes created for me. Also referred SignalR documentation written code using Javascript

We use windows authentication and Visual Studio 2015 , Windows 7, IIS Express

I get this error

Error during negotiation request.

Hub Class

public class ServerRefreshHub : Hub
{    
    public ServerRefreshHub()
    {

    }        

    public override Task OnConnected()
    {
     //It seems hub is not connected as client code fails
    }

    public static void NotifyUsers()
    {
    IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ServerRefreshHub>();
    context.Clients.All.MessageFromServer("Hello");
    }
}

Asp.Net WebAPI Startup

public partial class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.Map(
                "/signalr",
                map =>
                {
                    var hubConfiguration = new HubConfiguration { 
                                    EnableDetailedErrors = true };
                    map.RunSignalR(hubConfiguration);
                });
   }
}

Angular Code

declare var $: any;

@Injectable()
export class ServerNotifier {
    private connection: any;        
    private proxy: any;

    constructor() {

        this.connection = $.hubConnection();
        this.proxy = this.connection.createHubProxy('userCacheRefreshHub');
        this.proxy.on('MessageFromServer', (message: string) => 
                                  this.onMessageFromServer(message));

         this.connection.start().done((data: any) => {  
        console.log('Now connected ' + data.transport.name + ', connection ID= ' + data.id);  
         }).fail((error: any) => {  
         console.log('Could not connect ' + error);  
    });  
    }

    private onMessageFromServer(message: string) {

    }
}

Package.Json

"@types/jquery": "2.0.47",
"@types/signalr": "^2.2.35",
"signalr": "^2.2.2"

Note:

"@types/jquery": "^3.2.16" introduces typescript update to latest and I started getting more issues, so I downgraded this just for typings only

In Console I see 200 Response code for this requested URL http://localhost:58965/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22serverrefreshhub%22%7D%5D&_=1509976299819

Answer 1

SignalR do not generate proxy classes for you.

You have just to configure SignalR using MapSignalR() :

    public void Configuration(IAppBuilder app)
    {
        var config = new HttpConfiguration();

        var settings = new JsonSerializerSettings();
        settings.ContractResolver = new SignalRContractResolver();
        var serializer = JsonSerializer.Create(settings);
        GlobalHost.DependencyResolver.Register(typeof(JsonSerializer), () => serializer);

        app.UseCors(CorsOptions.AllowAll);
        app.MapSignalR();
    }

Add HubName attribute above your hub class :

[HubName("ServerRefreshHub")]
public class ServerRefreshHub : Hub

Don't forget to specify your hubConnection url when declaring hubConnection and specify your hubName when creating your proxy.

this.connection = $.hubConnection();
this.connection.url = "http://localhost:58965/signalr";
this.proxy = this.connection.createHubProxy('ServerRefreshHub');