Router does not navigate to targeted component

Question

I have a function that redirects a user to a page Orders if the user's state is complete, and to a HOME page if the user's state is not complete.

The Orders page has a GuardService that implements canActivate, and the HOME page does not have any guards.

I have some users with the R_ORDERS right and in a complete state who are not navigating at all. (ie they are neither routed to the Orders page nor the HOME page).

I can see that the HTTP requests retrieving the user's right is called but they are stuck in that page.

Is my issue related to this post ? enter link description here

or to this article enter link description here

Also, I have tried to add logs when the observable has completed but in that case, the log is never displayed in the console.

return this.getList().subscribe((e) => {
        const right = new List(e).FirstOrDefault(
          (d) => d.code == securizedPath.keyCode
        )?.type;
        if (!right) return resolve("OFF");
        return resolve(right);
      },
        (error) => {
          console.log("Right store threw an error");
          console.log(error);
        },
        () => {
          console.log("Right list completed")
        }
);

thanks for your help

async redirectTo() {
  this.loading = true;
  this.userState = await this.stateService.getToPromise(this.userId);


  if (this.userState.isComplete) {
     this.orderService.init();
     this.router.navigate([RouteNames.ORDERS]);
     this.loading = false;
     return;
  }

  this.router.navigate([RouteNames.HOME]);
  return;
  
}

The RouteNames.ORDERS has the following guard:

@Injectable({
  providedIn: "root",
})
export class GuardService implements CanActivate {
  constructor(
    private router: Router,
    private rightService: UserRightService
  ) {}
  canActivate(
    route: import("@angular/router").ActivatedRouteSnapshot,
    state: import("@angular/router").RouterStateSnapshot
  ):
    | boolean
    | import("@angular/router").UrlTree
    | import("rxjs").Observable<boolean | import("@angular/router").UrlTree>
    | Promise<boolean | import("@angular/router").UrlTree> {
    return this.test(route);
  }
  async test(route: ActivatedRouteSnapshot) {
    const right = await this.rightService.isRouteAllowed(route.url[0].path);
    if (right == "OFF") {
      this.router.navigate([RouteNames.FEATURE_UNAUTHORIZED]);
      return false;
    } else if (right != "ON") {
      this.router.navigate([RouteNames.FEATURE_UNAUTHORIZED]);
      return false;
    }
    return true;
  }


}

Code for the UserRightService is

 isRouteAllowed(route: string): Promise<Right> {

    const securizedPath = new List(this.securizedPaths).FirstOrDefault(
      (e) => e.name == route
    );
    return new Promise((resolve) => {
      return this.getList().subscribe((e) => {
        const right = new List(e).FirstOrDefault(
          (d) => d.code == securizedPath.keyCode
        )?.type;
        if (!right) return resolve("OFF");
        return resolve(right);
      });
    });
  }

securizedPaths is defined as below typescript[{ name: RouteNames.ORDERS, keyCode: "R_ORDERS" }, // other value ]

and getList is

 getList() {
    this.subjectList = new ReplaySubject<T[]>();
    this.load();
    return this.subjectList;
 }

protected load() {
      return this.getService()
        .getAll()
        .then((e) => {
          this.subjectList.next(e);
        })
        .catch((e) => {
          this.subjectList.next([]);
          this.subjectList = null;
        });
  }

// Code for this.getService().getAll()
  async getAll(id?: any, parameter?: any): Promise<Array<T>> {
    let urlParameters;
    ({ urlParameters, parameter } = this.createParameters(parameter, id));
    return this.http
      .get(this.url + (urlParameters ? "?" + urlParameters : ""))
      .toPromise<Array<T>>();
  }