Azure Signal R Service with Angular 13

Question

I've been trying to setup an integration between an Angular 13 client-side app and a .NET Framework 4.8 API with an Azure Signal R Service. After much trial and error this week I have finally got my api to build without CORS errors and I can make a successful negotiate call using postman. I am using the @aspnet/signalr client-side package since that is the only signal R package that support Azure Signal R Services.

Below is the angular code I am using to make a connection to my signal R hub named DashboardHub

import { Injectable } from '@angular/core';
import * as signalR from '@aspnet/signalr';

@Injectable()
export class SignalrService {
    public initializeSignalRConnection(): void {
        let connection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:58556/signalr/dashboardhub")
        .configureLogging(signalR.LogLevel.Debug)
        .build();

        connection.start()
        .then(() => { 
            console.log("connection.start");
            //connection.invoke("send", "Hello")
        })
        .catch((error) => {
            console.log("connection start error", error);
        });

        connection.on("send", data => {
            console.log(data);
        });
    }
}

The problem I am having is within the connection.start which returns an error Cannot read properties of undefined (reading 'length'). Screenshot of that browser error below.

API Signal R mapping for context

And here is the DashboardHub for reference