Router Guards Demo
Demonstrates CanActivateFn with a signal-based access control service.
Access Control Toggle
Protected Route Access
Controls access to /router/protected
Status: DENIED
Test the Guard
Toggle the switch above, then click the links below to test navigation:
Route Resolver Demo
Click a task link to see the resolver in action. Navigation waits for data to load.
How It Works
1.AccessControlService holds a
signal(boolean) for access state 2.accessGuard (
CanActivateFn) injects the service and checks accessGranted()3. If true: returns
true (allow navigation) 4. If false: returns
router.createUrlTree(['/router/denied']) (redirect) 5. The toggle switch calls
toggleAccess() which updates the signal reactively loadComponent vs loadChildren
This feature uses loadChildren with a separate router.routes.ts file. Compare with other routes that use loadComponent:
| Aspect | loadComponent | loadChildren |
|---|---|---|
| Use case | Single standalone component per route | Feature area with multiple child routes |
| Chunk granularity | Per-component chunks | Per-feature-group chunk |
| Route config | Inline in parent routes | Separate Routes file (colocated) |
| Guards/resolvers | Per-route in parent | Defined in child routes file |
| Best for | Leaf routes, simple pages | Feature modules, nested routes |
Network tab verification: Navigate to
/router and check the Network tab — you'll see a single chunk containing all router child routes loaded together.