API call in canactivate method in Angular

You can also try like this:

canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    return new Promise(res => {
        this.authservice.isUserAuthenticatedbyType("type1").subscribe(
            (data) => {
                if (data === true) {
                    res(true);
                } else {
                    this.router.navigate(['/']);
                    res(false);
                }
            },
            (error) => {
                this.router.navigate(['/']);
                res(false);
            }
        );
    });
}

If you are using promise try something like this - main idea is to hold your routing until your Api call is done - I had the same issue, I have achieved it by returning Promise<boolean> on my route gaurds

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean{
    const self = this;
    const expectedType = "type1";
    retrun new Promise(res => {
      this.authservice.isUserAuthenticatedbyType(expectedType).then(
        function (data) {
          if (data === false) {
            console.log(data);
            self.router.navigate(['/'], { relativeTo: self.route });
          }
          res(data);
        },
        function (error) {
          self.router.navigate(['/']);
          res(false);
        }
      );
    });
  }

This method solved my issue - it waits until the API returns data and gives direction to the route

Hope it will work - Happy coding !!

You can achieve it like this:

Angular <= 7.0.0

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  return this.authservice.isUserAuthenticatedbyType("type1").pipe(
    map(data => {
      if (data === false) {
        this.router.navigate(['/']);
        return false;
      }

      return !!data;
    }),
    catchError(() => {
      this.router.navigate(['/']);
      return of(false);
    }),
  );
}

Angular >= 7.1.0

Starting with Angular 7.1.0 (note that it's not in 7.0.x), you can also do this instead, which is shorter and more predictable if you have multiple guards:

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  return this.authservice.isUserAuthenticatedbyType("type1").pipe(
    map(data => data === false ? this.router.parseUrl("/") : !!data)
    catchError(() => this.router.parseUrl("/")),
  );
}