router navigate not working inside a subscribe (angular)

Question

I'm facing the following problem:

Im call my getByUsernameandPassword method and I recieve a response, but when I try to redirect the user to the /zeiterfassung route it just shows me the same /login page.. I wrote a console.log() to check if its entering in the res, and it does.. can someone please tell me what I am doing wrong?

Component:

  public async anmelden() {
    this.loading = true;
    this._benutzerservice.getByUsernameAndPassword(this.benutzerFormControl.value, this.passwortFormControl.value)pipe(first()).subscribe(
      res =>  {
        this._router.navigate(['/zeiterfassung']);
      },
      err => {
        console.log("a");
      });

Answer 1

Try routing outside the subscription,

public async anmelden() {
    this.loading = true;
    this._benutzerservice.getByUsernameAndPassword(this.benutzerFormControl.value, this.passwortFormControl.value) pipe(first()).subscribe(
        res => {
            this.redirect('/zeiterfassung');
        },
        err => {
            console.log("a");
        });
}

redirect(path) {
     this.router.navigate([path]) 
}

Answer 2

by default navigate method will try to navigate to yourdomain.com/zeiterfassung
by following way it will navigate to current URL eg yourcurenturl/zeiterfassung

import { ActivatedRoute } from '@angular/router';

constructor(private route :ActivatedRoute) 

public async anmelden() {
    this.loading = true;
    this._benutzerservice.getByUsernameAndPassword(this.benutzerFormControl.value, this.passwortFormControl.value)pipe(first()).subscribe(
      res =>  {
        this._router.navigate(['zeiterfassung'],{relativeTo:this.route});
      },
      err => {
        console.log("a");
      });