SignalR in angular 14 using webSocket and ngrok

Question

I need to create service who will be able to display message I got from backend for every finished task. I have 3 types of messages created in .Net and now I need to display that messages depend on finished functionality.

I'm encountering an error while implementing SignalR service in my Angular application. Below is the code for my SignalR service and the AppComponent where I'm subscribing to events:

import { Injectable } from '@angular/core';
import {
    HubConnectionBuilder,
    HubConnection,
    LogLevel,
} from '@microsoft/signalr';
import { Subject } from 'rxjs';
import { IPonudaKreiranaNotifikacijaDto } from 'app/models/IPonudaKreiranaNotifikacijaDto';
import { environment } from 'environments/environment';
import { IIzvrsenaAkcijaNotifikacijaDto } from 'app/models/IIzvrsenaAkcijaNotifikacijaDto';
import { IZahtjevKreiranPorukaDto } from 'app/models/IZahtjevKreiranPorukaDto';

@Injectable({
    providedIn: 'root',
})
export class SignalRService {
    private connection: HubConnection;
    public ponudaKreirana$ = new Subject<IPonudaKreiranaNotifikacijaDto>();
    public izvrsenaAkcija$ = new Subject<IIzvrsenaAkcijaNotifikacijaDto>();
    public kreiranZahtjev$ = new Subject<IZahtjevKreiranPorukaDto>();

    constructor() {}

    startConnection() {
        console.log('start connection');
        const signalRUrl = `${environment.APS_API_URL}messageHub`;
        this.connection = new HubConnectionBuilder()
            .withUrl(signalRUrl)
            .build();

        this.connection
            .start()
            .then(() => {
                console.log('SignalR connection started');
                this.registerEventHandlers();
            })
            .catch((err) =>
                console.error('Error while starting SignalR connection: ', err),
            );
    }

    private registerEventHandlers() {
        this.connection.on(
            'PonudaKreirana',
            (operaterIme: string, poruka: IPonudaKreiranaNotifikacijaDto) => {
                console.log(
                    'Received PonudaKreirana message:',
                    operaterIme,
                    poruka,
                );
                this.ponudaKreirana$.next(poruka);
            },
        );

        this.connection.on(
            'IzvrsenAkcija',
            (operaterIme: string, poruka: IIzvrsenaAkcijaNotifikacijaDto) => {
                console.log(
                    'Received IzvrsenAkcija message:',
                    operaterIme,
                    poruka,
                );
                this.izvrsenaAkcija$.next(poruka);
            },
        );

        this.connection.on(
            'KreiranZahtjev',
            (operaterIme: string, poruka: IZahtjevKreiranPorukaDto) => {
                console.log(
                    'Received KreiranZahtjev message:',
                    operaterIme,
                    poruka,
                );
                this.kreiranZahtjev$.next(poruka);
            },
        );
    }

    stopConnection() {
        this.connection
            .stop()
            .then(() => console.log('SignalR connection stopped'))
            .catch((err) =>
                console.error('Error while stopping SignalR connection: ', err),
            );
    }
}

import { Component } from '@angular/core';
import { Subscription } from 'rxjs';
import { SignalRService } from './services/signalr.service';
import { IPonudaKreiranaNotifikacijaDto } from './models/IPonudaKreiranaNotifikacijaDto';
import { IIzvrsenaAkcijaNotifikacijaDto } from './models/IIzvrsenaAkcijaNotifikacijaDto';
import { IZahtjevKreiranPorukaDto } from './models/IZahtjevKreiranPorukaDto';
import { ToastrService } from 'ngx-toastr';

@Component({
    selector: 'app-root',
    template: ` <router-outlet></router-outlet> `,
})
export class AppComponent {
    public title = $localize`Učitavam Smart Aps sistem...`;
    public ponudaKreiranaSubscription: Subscription;
    public izvrsenaAkcijaSubscription: Subscription;
    public kreiranZahtjevSubscription: Subscription;

    constructor(private signalRService: SignalRService, private toastr: ToastrService) {}

    ngOnInit() {
        this.signalRService.startConnection();

        this.ponudaKreiranaSubscription = this.signalRService.ponudaKreirana$.subscribe(
            (poruka: IPonudaKreiranaNotifikacijaDto) => {
                this.toastr.success(`Primljena poruka: ${poruka}`);
            },
        );

        this.izvrsenaAkcijaSubscription = this.signalRService.izvrsenaAkcija$.subscribe(
            (poruka: IIzvrsenaAkcijaNotifikacijaDto) => {
                this.toastr.success(`Primljena poruka: ${poruka}`);
            },
        );

        this.kreiranZahtjevSubscription = this.signalRService.kreiranZahtjev$.subscribe(
            (poruka: IZahtjevKreiranPorukaDto) => {
                this.toastr.success(`Primljena poruka: ${poruka}`);
            },
        );
    }

    ngOnDestroy() {
        this.signalRService.stopConnection();
        this.ponudaKreiranaSubscription.unsubscribe();
        this.izvrsenaAkcijaSubscription.unsubscribe();
        this.kreiranZahtjevSubscription.unsubscribe();
    }
}

The issue arises with the following error message:

[2024-03-12T09:38:41.384Z] Warning: Error from HTTP request. TypeError: Failed to fetch.

I've tried to create a SignalR service following the Angular documentation and have also reviewed various online resources related to SignalR implementation in Angular. However, I'm still encountering this error.
I expected the SignalR service to establish a connection without any errors and for the AppComponent to successfully subscribe to events emitted by the service.