Guards & Lazy Loading — Series 3

Preview — 3 of 10 questions

The guard returns an Observable<boolean> instead of a plain boolean. Does the router support this?

javascript

export const authGuard: CanActivateFn = () => {
  return inject(AuthService).checkSession(); // returns Observable<boolean>
};

AYes — the router accepts a boolean, a UrlTree, or a Promise/Observable resolving to either of those from any guard. When it's asynchronous, the router waits for it to resolve (or emit and complete) before deciding whether to proceed with, redirect, or cancel the navigation

BNo — a CanActivateFn must return a synchronous boolean or UrlTree; anything else is ignored and treated as true

CYes, but only the first emitted value is used, and only if it emits synchronously

DObservable-returning guards are supported only in NgModule-based routing, not provideRouter()

What is component here?

javascript

export const unsavedChangesGuard: CanDeactivateFn<EditorComponent> = (component) => {
  return component.hasUnsavedChanges() ? confirm('Discard changes?') : true;
};

AThe next component that's about to be activated, not the one being left

BA generic ActivatedRouteSnapshot, not an actual component instance

Ccomponent is only populated when navigating via routerLink, not Router.navigate()

DCanDeactivateFn<T>'s first parameter is the actual component instance currently active on the route being navigated away from — typed as EditorComponent here via the generic parameter — letting the guard call real methods and read real properties on it directly, like hasUnsavedChanges(), to decide whether leaving should be blocked

Inside HeroDetailComponent, how does the component actually get the resolved Hero object?

javascript

export const heroResolver: ResolveFn<Hero> = (route) => {
  return inject(HeroService).getHero(route.paramMap.get('id')!);
};

AAngular automatically creates and injects a new @Input() hero: Hero on the component, with no extra wiring needed

BHeroDetailComponent never receives it directly; only the router itself uses the resolved value, purely to decide whether the route is allowed to activate

CThrough ActivatedRoute's data, under the key given in the resolve object — this.route.snapshot.data['hero'] for a one-time read, or this.route.data.subscribe(data => ...) (or the data observable via toSignal/async) for a reactive one — the resolver's return value is merged into that same route data alongside anything set via the route's static data property

DThe resolver's return value replaces the entire ActivatedRoute object

Answer all 10 questions (7 more), see explanations for every answer, and track your score.