After redirecting angular page by SignalR event Component not working

July 24, 2022

I have a method named "leave()" in which, we are redirecting the page to dashboard.
Whenever I uses this method by button click, it’s working fine.

There is another scenario where it called by signalr event(Subject). In this case, page is redirecting successfully, but components on the dashboard page not loading properly.

In below code "OnLeaveAll" is Subject type in "hubService".

ngOnInit(): void {
    this.hubService.OnLeaveAll.subscribe(x => {
      this.leave();
    });
}

leave() {
    this.router.navigate(['app', 'dashboard']);
}

>Solution :

Check your devtools console. Maybe there is an error regarding the angular zone.
If yes, try this.

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {
}

ngOnInit(): void {
  this.hubService.OnLeaveAll.subscribe(x => {
    this.ngZone.run(() => {
      this.leave();
    });
  });
}

leave() {
  this.router.navigate(['app', 'dashboard'], { replaceUrl: true });
}

You can find more about this on below link.

https://angular.io/guide/zone#ngzone-run-and-runoutsideofangular