Почему angular возвращает false при навигации

Question

У меня есть страница входа. Эта страница входа вызывает (фиктивную) службу:

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

В настоящее время эта служба является фиктивной:

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',
    });
  }
}

На моей странице входа я зарегистрирован как пользователь службы:

  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');
        }
      }
    });
  }

Итак, когда я ввожу адрес электронной почты + пароль, отправляю форму, я вижу свои 3 console.logs подписки пользователя. Один указывает на то, что выполняется подписка (и что пользователь не пуст), второй отображает, как ожидалось, пользователя, а третий указывает «с ошибкой», и маршрутизатор не переходит к /.

Почему это могло быть? Мои маршруты тоже довольно простые:

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),
  },
];

Весь код доступен здесь: https://j4n.visualstudio.com/_git/WebMessenger?path=%2F&version=GBfeature%2Flogin-page&_a=contents

Это фиктивный проект, чтобы представить angular некоторым коллегам

Answer 1

Я пробовал это на stackblitz и вижу, что он работает. Единственный случай, когда я вижу, что он возвращает false, - это когда навигация не происходит (из-за того, что охранник не разрешает это, или если маршрут тот же). Например, если вы находитесь в компоненте A и снова пытаетесь перейти к компоненту A, навигация не происходит, поскольку нет изменений в маршруте. Но если вы находитесь в компоненте A, но переходите к компоненту B, он возвращает true. Я думаю, что в вашем случае вы уже находитесь на маршруте "/". Следовательно, он больше не выполняет навигацию. Надеюсь, это поможет.