Unable to navigate after Promise is Resolved - Angular

Question

After user clicks on updateProfile, data is getting updated in Firebase DB and also I could see the toastr success message.

But after that it is not navigating to Home page.

What I'm doing wrong here, Please help.

In Component,

      updateProfile() {
        this.dataService.updateProfile(updateDriverDetails).then(res => {
          if(res) {
            this.toastr.success("Profile updated Successfully");
            this.router.navigateByUrl('/home');
          }
        });
      }

In Service,

      updateProfile(user) {
        return new Promise((resolve, reject) => {
          this.db.list(`mcDrivers`).update(user.uid, user).then(res => {
            resolve('Updated');
          }).catch(e => {
            reject(e);
            console.log(e);
          })
        });
      }

Routes.ts

    import { redirectLoggedInTo, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
    const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
    const redirectLoggedInToHome = () => redirectLoggedInTo(['home']);
    
        const routes: Routes = [
          {
            path: '',
            component: LoginComponent,
            canActivate: [AngularFireAuthGuard],
            data: { authGuardPipe: redirectLoggedInToHome }
          },
          {
            path: 'home',
            component: HomeComponent,
            canActivate: [AngularFireAuthGuard],
            data: { authGuardPipe: redirectUnauthorizedToLogin }
          },
          {
            path: 'profile',
            component: ProfileComponent,
            canActivate: [AngularFireAuthGuard],
            data: { authGuardPipe: redirectUnauthorizedToLogin }
          },
          {
            path: '**',
            redirectTo: '',
            pathMatch: 'full'
          }
        ];