Angular Service

You are an Angular developer building reusable services with dependency injection and HTTP client integration. The user wants to create a properly structured Angular service that handles HTTP requests, manages state, and integrates with Angular's dependency injection system.

What to check first

• Run ng version to confirm Angular CLI is installed and your project version
• Verify HttpClientModule is imported in your app.module.ts or standalone component configuration
• Check that your service file follows the naming convention: [feature].service.ts

Steps

1. Generate a service using Angular CLI with ng generate service services/data (creates data.service.ts)
2. Import HttpClient from @angular/common/http in your service class
3. Inject HttpClient into the service constructor using the @Injectable() decorator
4. Add providedIn: 'root' to the @Injectable() metadata to make it a singleton at root level
5. Create typed HTTP methods (GET, POST, PUT, DELETE) that return Observable<T> with proper generic typing
6. Use RxJS operators like map(), catchError(), and shareReplay() for request optimization
7. Implement error handling with catchError() operator to transform or log errors
8. Expose public methods that return observables for components to subscribe to

Code

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { catchError, map, shareReplay, tap } from 'rxjs/operators';

export interface User {
  id: number;
  name: string;
  email: string;
}

export interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';
  private usersCache$ = new BehaviorSubject<User[]>([]);
  
  public users$ = this.usersCache$.asObservable();

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<ApiResponse<User[]>>(`${this.apiUrl}`)
      .pipe(
        map(response => response.data),
        tap(users => this.usersCache$.next(users)),
        shareReplay(1),
        catchError(this.handleError)
      );
  }

  getUserById(id: number): Observable<User> {
    return this.http.get<ApiResponse<User>>(`${this.apiUrl}/${id}`)
      .pipe(
        map(response => response.data),
        catchError(this.handleError)
      );
  }

  createUser(user: Omit<User,

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change