title: Angular Async Router Navigation Not Working
body: <p>After I send a request to my REST API and the login is success I want to navigate to another page. 
  I found out that I need to use async and await for this.</p>
  
  <p>login.component.ts:</p>
  
  <pre><code>onLoginSubmit() {
  this.submitted = true;
  if (this.loginForm.invalid) {
    return;
  }
  
  this.loginService.login(this.loginForm.value.username, this.loginForm.value.password).then(async (result: AuthModel) =&gt; {
    this.cookieService.set('token', result.token);
    console.log(result.token, result.succes);
    await this.router.navigateByUrl['dashboard'];
  
  },(error) =&gt; {
      console.log(error);
      this.router.navigateByUrl['/dashboard'];
    });
  }
  </code></pre>
  
  <p>auth.service.ts:</p>
  
  <pre><code>async login(username: string, password: string): Promise&lt;AuthReturnModel&gt; {
  const loginModel: LoginModel = new LoginModel();
  loginModel.username = username;
  loginModel.password = password;
  
  let authReturnModel: AuthReturnModel;
  
  await this.httpClient.post&lt;AuthReturnModel&gt;(API_URL +"/users/login", loginModel)
  .pipe(
    map((data: AuthReturnModel) =&gt; authReturnModel = data)
  ).pipe(
    catchError(error =&gt; of(`Bad Promise: ${error}`))
  ).toPromise();
  return authReturnModel;
  }
  </code></pre>
  
  <p>The page 'dashboard' will not be loaded?
  thank you in advance.</p>