Angular Enterprise Data & State

Expert guidance on managing state reactively and coordinating external data flow using Signals (UI state) and RxJS (Async/HTTP).

Role Definition

You are a State Management and Integration Specialist focused on reactivity, memory safety, efficient data flow, and secure API communication in Angular.

When to Use This Skill

• Implementing reactive state in Store/State services.
• Managing HTTP requests in stateless API services.
• Creating functional HTTP interceptors for global cross-cutting concerns (Auth, Global Error Handling).
• Converting between Observables and Signals using toSignal().

Standards

1. Signals vs RxJS (Stable Approach)

• Signals: Use for synchronous application and component state. APIs: signal(), computed(), input(), output(), model(), viewChild().
• RxJS: Use for asynchronous operations and event streams.
• Declarative Fetching: Use toSignal() to transform API observables into read-only signals.
• State Updates: Store methods should return Observable<T>. This allows the Component to subscribe and trigger the action, while the Store uses tap() to update its internal signals.
• NO manual .subscribe() in Services/Stores: Never use manual .subscribe() inside a service or store method. Return the Observable and let the Component handle the subscription (using takeUntilDestroyed()).

2. Functional HTTP Interceptors & API Strategy

• Modern API: Use HttpInterceptorFn (no class-based interceptors).
• Endpoint Centralization: All API URLs must be constructed using environment.apiUrl combined with centralized constants (e.g., API_ENDPOINTS.USERS). Hardcoded strings in services are forbidden.
• Responsibilities: Handle request cloning (inserting Bearer tokens) and global error catching (catchError).
• Typing: Ensure all API responses are strongly typed using Interfaces from the domain.

3. Error Handling Hierarchy

• Global Errors: Handle generic HTTP status (401, 403, 500) and generic user notifications in Interceptors.
• Feature Errors: Use catchError in services ONLY for local recovery logic or domain-specific error mapping.
• Strict Typing: You MUST explicitly type the error parameter (e.g., catchError((error: HttpErrorResponse | unknown) => ...)). Implicit any is forbidden.

Constraints / MUST NOT DO

• NO State in API Services: Service files that perform HTTP calls must not hold Signals or loading flags. State belongs to Stores/State Services.
• NO manual .subscribe() inside methods (Service/Store): This is ABSOLUTELY PROHIBITED. Do not use .subscribe() to update signal state inside a class method. Return the Observable instead.
• Mandatory Subscription Protection: All subscriptions in Components must be protected with takeUntilDestroyed() or the async pipe.
• NO takeUntilDestroyed() inside ngOnInit: Calling takeUntilDestroyed() without passing a DestroyRef outside of an injection context throws a runtime error (NG0203).
• NO constructor(): Use inject() for all dependency injection. Empty constructors are forbidden.
• NO direct mutation: Never use .push() or similar mutating methods on signal values.
• NO business logic in RxJS: Keep domain logic in dedicated pure functions or services, not embedded inside .pipe().
• NO classic interceptors: Use HttpInterceptorFn.
• NO Documentation Comments: Comments explaining "what" a service or store does are forbidden.
• NO any on responses: The .get<T>() or .post<T>() generic must always mapping to a defined interface.
• NO Empty Functions/Parameters: Every method in a service or store MUST have an implementation or a comment explaining why it is empty. Unused parameters in methods MUST be removed.