Routing
SkillAI & modelsConfigure 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.
No other account needed.
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) orloadChildren(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()inprovideRouter(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
TitleStrategyor usetitle: '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
loadComponentorloadChildrenfor 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