angular-routing

name	angular-routing
description	Configure Angular Router with lazy-loaded routes, functional guards, and component input binding. Use when defining routes, lazy-loading features, creating route guards, or setting up resolvers.
metadata	{"triggers":{"files":["*.routes.ts"],"keywords":["angular router","loadComponent","canActivate","resolver"]}}

Routing

Priority: P0 (CRITICAL)

1. Lazy Load All Feature Routes

• Use loadComponent (standalone) or loadChildren (route file) for every feature route.

See routing patterns for lazy loading and guard examples.

2. Use Functional Guards

• Create function-based guards (CanActivateFn) instead of deprecated class-based guards.

See routing patterns for functional guard implementation.

3. Enable Component Input Binding

• Configure withComponentInputBinding() in provideRouter(routes, withComponentInputBinding()).
• Define input.required<string>() in components — Angular auto-maps route params, query params, and resolve data.

4. Configure Resolvers and Titles

• Create ResolveFn<T> to pre-fetch critical data before navigation.
• Provide custom TitleStrategy or use title: 'Dashboard' in route data.

Anti-Patterns

• No logic in route config: Move access control and data fetching to dedicated Guards and Resolvers.
• No eager feature imports: Use loadComponent or loadChildren for all feature routes.

References

• Routing Patterns

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

• No logic
• deprecated