title: Failed to complete negotiation with the server - Angular + SignalR
body: <p>I'm unable to establish a connection using Angular + Azure Functions using Nodejs. I know that the backend works because I created it using the following <a href="https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-quickstart-azure-functions-javascript" rel="nofollow noreferrer">documentation</a> and tested it with the client URL provided in docs. Messaging was working across multiple clients.</p>
  
  <p>So now I'm trying to get Angular working. I've created a service for signalr in Angular to establish the connection, but I'm getting the errors</p>
  
  <p><a href="https://i.stack.imgur.com/YZIh0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YZIh0.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/jzpPf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jzpPf.png" alt="enter image description here"></a></p>
  
  <p>and on the network tab</p>
  
  <p><a href="https://i.stack.imgur.com/Ylc4A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ylc4A.png" alt="enter image description here"></a>
  I also tried replacing this code in service </p>
  
  <pre><code>
    private buildConnection = () =&gt; {
      this.hubConnection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:7070") //use your api adress here and make sure you use right hub name.
        .build();
    };
  
  </code></pre>
  
  <p>with this code</p>
  
  <pre><code>  private buildConnection = () =&gt; {
      this.hubConnection = new signalR.HubConnectionBuilder()
        .configureLogging(signalR.LogLevel.Debug)
        .withUrl("http://localhost:7070/api", {
          skipNegotiation: true,
          transport: signalR.HttpTransportType.WebSockets
        })
        .build();
  </code></pre>
  
  <p>per the recommended answer from this <a href="https://stackoverflow.com/a/52913505/4350389">post</a> but then it just returns</p>
  
  <p><a href="https://i.stack.imgur.com/zaySh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zaySh.png" alt="enter image description here"></a> </p>
  
  <p>I've never used SignalR before so I'm trying to piece this together from looking at several tutorials. I appreciate any help!</p>
  
  <p>signalr service</p>
  
  <pre><code>import { Injectable, EventEmitter } from "@angular/core";
  import * as signalR from "@aspnet/signalr";
  import { SignalViewModel } from "./signal-view-model";
  
  @Injectable({
    providedIn: "root"
  })
  export class SignalRService {
    private hubConnection: signalR.HubConnection;
    signalReceived = new EventEmitter&lt;SignalViewModel&gt;();
  
    constructor() {
      this.buildConnection();
      this.startConnection();
    }
  
    private buildConnection = () =&gt; {
      this.hubConnection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:7070/api") //c
        .build();
    };
  
    private startConnection = () =&gt; {
      this.hubConnection
        .start()
        .then(() =&gt; {
          console.log("Connection Started...");
          this.registerSignalEvents();
        })
        .catch(err =&gt; {
          console.log("Error while starting connection: " + err);
  
          //if you get error try to start connection again after 3 seconds.
          setTimeout(function () {
            this.startConnection();
          }, 3000);
        });
    };
  
    private registerSignalEvents() {
      this.hubConnection.on("SignalMessageReceived", (data: SignalViewModel) =&gt; {
        this.signalReceived.emit(data);
      });
    }
  }
  
  </code></pre>
  
  <p>just like from <a href="https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-quickstart-azure-functions-javascript" rel="nofollow noreferrer">Reference Docs</a> link above, this is what my azure functions looks like</p>
  
  <p>messages</p>
  
  <pre><code>
  module.exports = async function (context, req) {
    return {
      "target": "newMessage",
      "arguments": [ req.body ]
    };
  };
  </code></pre>
  
  <p>negotiate</p>
  
  <pre><code>
  module.exports = async function (context, req, connectionInfo) {
    context.res.json(connectionInfo);
  };
  </code></pre>
  
  <p>host.json</p>
  
  <pre><code>{
    "version": "2.0",
    "extensionBundle": {
      "id": "Microsoft.Azure.Functions.ExtensionBundle",
      "version": "[1.*, 2.0.0)"
    },
    "Host": {
      "LocalHttpPort": 7070,
      "CORS": "http://localhost:4200",
      "CORSCredentials": true
    }
  }
  </code></pre>