HoangNguyen0403

Routing

Standards for Angular Router, Lazy Loading, and Guards.

HoangNguyen0403 501 148 Updated 4mo ago

Resources

1
GitHub

Install

npx skillscat add hoangnguyen0403/agent-skills-standard/routing

Install via the SkillsCat registry.

SKILL.md

Routing

Priority: P0 (CRITICAL)

Principles

  • Lazy Loading: Use loadComponent for standalone components and loadChildren for route files.
  • Functional Guards: Use function-based guards (CanActivateFn) instead of class-based guards (Deprecated).
  • Component Inputs: Enable withComponentInputBinding() to map route params directly to component inputs.

Guidelines

  • Title Strategy: Use TitleStrategy service to auto-set page titles from route data.
  • Resolvers: Use resolve to pre-fetch critical data before navigation completes, but avoid blocking UI for too long.

Anti-Patterns

  • Logic in Routes: Keep route definitions clean. Move logic to Guards or Resolvers.
  • Eager Loading features: Never direct import feature components in root routes.

References