Angular 2+ route resolvers not being called

Question

I have set up an AuthResolve class to ensure authentication is complete before displaying a route, but for some reason, the resolver is not getting called. neither the resolver function nor the constructor. The console does not log the logs I have inserted. I do not understand how this can be.

Root level routes:

export const appRoutes: Routes = [
  {
    path: '',
    component: CallbackComponent,
    canActivate: [AuthGuardService],
    pathMatch: 'full',
    resolve: {
      auth: AuthResolve,
    },
  },
  {
    path: 'applicant', component: ApplicantViewComponent,
    canActivate: [AuthGuardService],
    children: [...applicantRoutes],
    resolve: {
      agency: AgencyResolve,
      mapping: SectionMappingResolve,
      auth: AuthResolve,
    },
  },
  {
    path: 'agency', component: AgencyViewComponent,
    canActivate: [AuthGuardService],
    children: [...agencyRoutes],
    resolve: {
      agency: AgencyResolve,
      mapping: SectionMappingResolve,
      auth: AuthResolve,
    },
  },
  {
    path: 'tos', component: TosComponent,
    canActivate: [AuthGuardService],
    resolve: {
      auth: AuthResolve,
    },
  },
  {
    path: 'eua', component: EuaComponent,
    canActivate: [AuthGuardService],
    resolve: {
      auth: AuthResolve,
    },
  }
];

auth-resolve.ts:

@Injectable()
export class AuthResolve implements Resolve<User> {

  constructor(private authService: AuthService) {
    console.log('AuthResolve.constructor');
  }

  resolve(route: ActivatedRouteSnapshot): Observable<User> {
    console.log('AuthResolve.resolve');
    const authHandle = this.authService.handleAuthentication()

    authHandle.subscribe(() => {
      this.authService.scheduleRenewal();
    });

    return authHandle;

  }
}

Why are my resolvers not getting called?

Answer 1

Remove following from your first route:

canActivate: [AuthGuardService]