CtrlK
BlogDocsLog inGet started
Tessl Logo

angular-routing

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.

68

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

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

Canonical response anchors

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

  • No logic
  • deprecated
Repository
HoangNguyen0403/agent-skills-standard
Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.