Angular Technology Stack

IMPORTANT NOTE: This document is not final; it is under review.

This document outlines the specific standards and conventions for developing web applications with Angular.

Core Stack

• Framework: Angular (latest stable version)
• Language: TypeScript
• UI Components: Angular Material is the required component library.

State Management

• Complex State: NgRx should be used for complex, global state management scenarios.
• Simple State: For simpler, component-level or service-level state, native RxJS BehaviorSubjects are preferred.

Forms

• Standard: Angular's built-in Reactive Forms module must be used for all form handling. Do not use template-driven forms.

Testing

• Unit/Integration: Jest is the preferred framework for unit and integration testing.
• E2E: Cypress.

Naming Conventions

• Modules, Components, Services: PascalCase with the appropriate suffix (e.g., UserProfileComponent, AuthService).
• Files: Follow the Angular CLI convention (kebab-case.type.ts, e.g., user-profile.component.ts).

Directory Structure

A feature-based directory structure using Angular modules is the standard.

src ├── app │ ├── core # Core module (guards, interceptors, single-use services) │ ├── features # Feature modules │ │ └── user-profile │ │ ├── components │ │ ├── services │ │ ├── user-profile.component.ts │ │ └── user-profile.module.ts │ ├── shared # Shared module (common components, pipes, directives) │ └── app.module.ts ├── assets # Static assets ├── environments # Environment configuration └── styles # Global styles