HomeChallengesRepsProblemsLeaderboardTake a challenge

Routes and Guards

Lazy-loaded routes, a functional guard that remembers where you were going, and data resolved before the component renders.

Intermediate25 min on the clock6 graded checks · 100 pointsAngular SprintPro

See alsoRoutes and guards, the React wayThe same problems in React — lazy routes, an Outlet guard, and a loader.

Graded by reading your code against the checklist below.

What you build

  • Load every feature lazily with loadComponent or loadChildren
  • Write a functional CanActivateFn guard using inject()
  • Redirect an unauthenticated visitor and carry the URL they wanted
  • Resolve the route data before the component is created
  • Bind route params onto component inputs
  • Handle an unknown path

Done means

A signed-out visitor to /sprints lands on sign-in and is returned afterwards; the sprint page never renders empty.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

  1. Load features lazily+25Standalone components and inject()
  2. Write a functional guard+25Standalone components and inject()
  3. Redirect, and carry the intended URL+15Roles and policies
  4. Resolve the data before the component+15Loading and error states
  5. Bind route data onto inputs+10Standalone components and inject()
  6. Handle an unknown path+10Error handling

What it teaches

Standalone components and inject()intermediate

Standalone components declare what they need instead of belonging to an NgModule, and inject() gets a dependency without a constructor parameter — together they are most of what changed in modern Angular.

The rest of Angular Sprint