Signalr callbacks are run outside angular zone?

Question

I have a strange problem with signalr and angular. We recently upgraded signalr to use the @microsoft/signalr package instead of the @aspnet/signalr one and we noticed that the callback called by signalr are no longer run in the angular zone.

The significant code bits:

 // connection is of type HubConnection
public async onUpdateJobInfo(callback: (jobInfo: JobInfo) => void): Promise<void> {
        return this.connection.on('someInvokedMethod', callback);
    }

 // Register the callback
this.jobHub.onUpdateJobInfo((jobInfo: JobInfo) => this.updateJobInfo(jobInfo));

// Process the callback 
private updateJobInfo(jobInfo: JobInfo): void {
        console.log('update jobservice in zone: ', NgZone.isInAngularZone());
        
    }

The log (update jobservice in zone: false) indicates that we are not running the callback in the angular zone, hence change detection does not work as expected. When using a similar setup with the old signalr the code runs in the angular zone as expected. Is this a known recent change? How to best cope with this? Encapsulate everything with a zone.run() statement?

Thanks for the help!

Answer 1

We also started having issues with Angular not rendering changes (so we must call detectChanges method). It started after upgrading signalr package but not from @aspnet/signalr to @microsoft/signalr.

We already had @microsoft/signalr .NET 5.0 (microsoft/[email protected]) which was fine, but upgrading to @microsoft/signalr .NET 6.0 (e.g. microsoft/[email protected]) started the Angular screen updates issues.

We had to downgrade back to 5.0.14.