Why does the angular returns false when navigating

Question

I've a login page. This login page calls a (mock)service:

  async onSubmit() {
    this.isLoading.next(true);
    await this.authService.login(
      this.loginForm.value.email,
      this.loginForm.value.password
    );
    this.isLoading.next(false);
  }

The service is quite a dummy currently:

export class AuthService {
  private _user = new BehaviorSubject<User>(null);

  get user() {
    return this._user.asObservable();
  }

  constructor() {}

  async login(username: string, password: string) {
    await new Promise((resolve) => setTimeout(resolve, 500)); // To mock service
    this._user.next({
      name: 'Julien',
      avatarUrl: 'https://randomuser.me/api/portraits/men/1.jpg',
    });
  }
}

In my login page, I'm registered to my service's user:

  ngOnInit() {
    this.loginForm = new FormGroup({
      email: new FormControl('', {
        validators: [Validators.required, Validators.email],
      }),
      password: new FormControl('', { validators: [Validators.required] }),
    });

    this.userSubscription = this.authService.user.subscribe(async (user) => {
      if (user) {
        console.log('User logged in, going to /');
        console.log(user);
        if (await this.router.navigate(['/'])) {
          console.log('with success');
        } else {
          console.log('with failure');
        }
      }
    });
  }

So when i enter an email+password, submit the form, I see my 3 console.logs of the user subscription. One indicate the subscription is being called(and that the user is not empty), the second display as expected the user, but the third indicate "with failure", and the router doesn't navigate to /.

Why could this be? My routes are quite simple too:

const routes: Routes = [
  { path: '', redirectTo: 'chat', pathMatch: 'full' },
  {
    path: 'chat',
    loadChildren: () => import('./chat/chat.module').then((m) => m.ChatModule),
    canLoad: [AuthGuard],
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule),
  },
];

The whole code is available here: https://j4n.visualstudio.com/_git/WebMessenger?path=%2F&version=GBfeature%2Flogin-page&_a=contents

It's a dummy project to present angular to some colleagues

Answer 1

I tried it out on stackblitz and I see it is working. The only case where I see it returning a false is when the navigation does not happen (due to the guard not allowing it or if the route is the same). For example, if you are in component A and you try to navigate again to component A, no navigation happens since there is no change in the route. But if you are in component A, but navigate to component B, then it returns true. I guess in your case, you are already in the '/' route. Hence, it does not navigate again. Hope this helps.