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. (triggers: *.routes.ts, angular router, loadComponent, canActivate, resolver)

89

Quality

86%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

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

Repository
HoangNguyen0403/agent-skills-standard
Last updated
Created

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.