Angular navigate occasionally not working in heroku

I have a following method in angular:

loginUser(email: string, password: string): void {
if (email && password) {
  this.hasLoginMessage = true;
  this.loginMessage = "Login in progress";

  this.api.login(email, password).then((result) => {
    if (result.status && result.status != 200) {
      this.loginMessage = "Login failed!";
      //Wrong password
    }
    else {
      this.api.setLoggedIn(result.token);
      this.router.navigate(['/dashboard']);

      try {
        var elementList = this.document.querySelectorAll('.modal-backdrop');
        for (let i = 0; i < elementList.length; i++) {
          elementList[i].removeAttribute('class');
        }
      }
      catch {}
      
      try {
        var elementList = this.document.querySelectorAll('.modal-open');
        for (let i = 0; i < elementList.length; i++) {
          elementList[i].removeAttribute('class');
          elementList[i].removeAttribute('style');
        }
      }
      catch {}
    }
  }).catch((error) => {
    this.api.userLoggedIn = null;
    this.loginMessage = "Login failed!";
    console.log(error);
  })
}
else {
  //Fields incorrect
}

}

this.api.setLoggedIn(result.token) sets localStorage parameters to remember that the user has logged in. When I try to login, occasionally, it sets local storage parameters (indicating that login was successful), but the site is not being redirected to /dashboard. The code after this.router.navigate(['/dashboard']); is still being executed without a problem. The issue appears only in heroku. Any ideas why?