Is there a solution to run signalR in angular 5 project or is there an alternative to signalR to bild real time notification ??

Question

I have an angular 5 and .Net project, I needed to integrate real time notifications, the solution was to work with signalR. I tested a sipmle signalR example with .Net5 and angular 13 and it works very well .

Now this Error occur in angular 5

ERROR in ./node_modules/@microsoft/signalr/dist/esm/Utils.js
Module parse failed: Unexpected token (101:19)
You may need an appropriate loader to handle this file type.
|     const response = await httpClient.post(url, {
|         content,
|         headers: { ...headers, ...options.headers },
|         responseType,
|         timeout: options.timeout,

I think that the problem is related to node but I am blocked and I didn't find a solution.

This is my angular service

@Injectable()
export class SignalRService {

  private hubConnection: HubConnection;

  setPlayerName$ = new Subject<string>();
  private url = 'https://localhost:44375/hub/';

  constructor() { 
   this.buildConnection() ; 
   this.registerOnServerEvents() ; 
   this.startConnection()
  }


  private buildConnection(): HubConnection {
    return new HubConnectionBuilder()
      .withUrl(this.url, { accessTokenFactory: () => "eyJSb2xlIjoiQWRtaW4iLCJJc3N1ZXIiOiJJc3N1ZXIiLCJVc2VybmFtZSI6IkphdmFJblVzZSIsImV4cCI6MTY1NzE4OTQ4NywiaWF0IjoxNjU3MTg5NDg3fQ" })
      .withAutomaticReconnect()
      .build();
      
  }
  private registerOnServerEvents(): void {

    this.hubConnection.on('PlayerNameSet', (playerName: string) => {
      this.setPlayerName$.next(playerName);
    });
  }
  private startConnection(): void {
    if (this.hubConnection.state === HubConnectionState.Connected) {
      return;
    }

    this.hubConnection.start().then(
      () => {
        console.log('Hub connection started!');
      },
      error => console.error(error)
    );
  }
    setPlayerName(playerName: string): void {
    this.hubConnection.send('SetPlayerName', playerName);
  }
}

Answer 1

the solution was to use an earlier version of signalR which is compatible with angular5