angular.md

Development philosophy

• Prefer simple solutions over clever ones.
• Write code that is clear and self-explanatory.
• Build with the long term in mind.

Stack

• Angular
• Tailwind CSS

Conventions

• Always use standalone components. Never use NgModules for new components.
• Use signals for reactive state. Prefer signal(), computed(), and effect() over RxJS for component-level state. Expose signals from services as readonly using .asReadonly().
• Use services for business logic and data fetching. Never put HTTP calls or business logic directly in components.
• Use the inject() function for dependency injection. Never use constructor injection in new code.
• Use reactive forms for complex forms and template-driven forms only for simple cases. Never mix both approaches in the same form.
• Use route guards for access control. Never check auth status inline in components and redirect manually.
• Use Angular's HttpClient for all API calls. Never use raw fetch or XMLHttpRequest.
• Use routerLink for internal navigation. Never use raw <a href> for internal routes.
• Prefer changeDetection: ChangeDetectionStrategy.OnPush on components, especially when using signals for state management.
• Lazy-load every route except the primary landing page using loadComponent and loadChildren with dynamic import().
• Use functional interceptors with provideHttpClient(withInterceptors([...])). Never use class-based interceptors.
• Use pure pipes for simple template transformations. For complex derived state, prefer computed() signals. Avoid calling methods in templates that run expensive calculations on every change detection cycle.

Verification

After making changes, always run the following checks and fix any issues before considering work complete:

1. Build: ng build
2. Lint: ng lint --fix
3. Tests: ng test