1

My router is like this

const routes: Routes = [{
  path: '',
  canActivate: [AuthGuard],
  resolve: {
    user: UserResolver,
  },
  children: [{
    path: 'home',
    canActivate: [HomeGuard],
    component: HomeComponent,
  }, {
    ...otherRoutes,
  }],
}];

In order to authorize access, the HomeGuard needs a data that is in the data retrieved by the UserResolver. The problem is that HomeGuard does not wait for UserResolver to be completed.

@Injectable({
  providedIn: 'root',
})
export class UserResolver implements Resolve<any> {

  constructor(private api: ApiService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User> {
    return this.api.getUser().pipe(
      delay(1000), // simulates the api call duration
      map((user: User) => {
        console.log(user);
        return user;
      }),
    );
  }
}

In other stackoverflow posts, people claim that the resolver resolves object before navigating, but does it mean guards wait for parents resolvers to be completed?

EDIT. Is it okay to use a guard as resolver?

Yoann Picquenot
  • 640
  • 10
  • 26

1 Answers1

3

According to angular documentation.

When both guard and resolvers are specified, the resolvers are not executed until all guards have run and succeeded.

And please do check the example explained also in the angular documentation.

Rishanthakumar
  • 871
  • 10
  • 20