angular-routing_skill

Overview

This skill implements routing for Angular v20+ applications with lazy loading, functional guards, resolvers, and signal-based route parameters. It focuses on robust navigation setup, protected routes, prefetching route data, and nested routing patterns to keep apps modular and performant.

How this skill works

Define Routes with component, children, lazy-loaded modules or components, and route data. Add functional CanActivate, CanDeactivate guards and Resolve functions to protect routes and pre-fetch data. Use signal-based inputs or ActivatedRoute-to-signal conversions for route and query parameters, and programmatic Router navigation for runtime transitions.

When to use it

• Setting up top-level and nested routes for a new Angular v20+ app
• Adding authentication or role-based protection to routes
• Improving initial load with lazy-loaded modules and components
• Prefetching data for a route using resolvers
• Reading route params or query params reactively with signals

Best practices

• Prefer lazy loading for feature modules and heavy components to reduce initial bundle size
• Use functional guards for concise, testable route protection and to return UrlTree for redirects
• Expose route params and resolved data as signal inputs for simple reactive components
• Keep route data minimal and use resolvers for expensive async fetching
• Use CanDeactivate to protect forms from accidental navigation

Example use cases

• Create a dashboard route protected by an authGuard that redirects unauthenticated users to login with a returnUrl
• Lazy-load an admin feature module and a settings component to speed up first paint
• Resolve user details before activating a profile route, then inject the resolved user as a component input
• Nest product routes under a ProductsLayoutComponent and render children via router-outlet
• Use toSignal on ActivatedRoute params for components that rely on observables but prefer signals