Routing

Standards for Angular Router, Lazy Loading, and Guards.

majiayu000 1dae1f1 2 files · 1.7 KB Updated 567 repo stars

File contents

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

  • Routing Patterns

majiayu000/claude-skill-registry-data/tree/main/data/routing commit 1dae1f17ed

Frequently asked questions

npx skillmds add majiayu000/routing