Routing

SkillAI & models

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.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Routing skill

What this skill tells your AI

The instructions your AI receives, as published by hoangnguyen0403/agent-skills-standard in skills/angular/angular-routing/SKILL.md and read by ahel’s review.

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

Canonical response anchors

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

  • No logic
  • deprecated

Signals

GitHub stars
565
Forks
164
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
angular-routing
Source
github.com/hoangnguyen0403/agent-skills-standard