⚠️3 Mistakes Angular Devs Make with Services

Services in Angular provide invaluable functionality to our apps. However, it’s easy to do this incorrectly, which can lead to problems down the line. Let’s briefly discuss a few of the pitfalls that developers may come across when using them.

1. Overloading Services with Multiple Responsibilities

Mistake: Putting too much logic into a single service, such as combining HTTP calls, business logic, state management, and UI logic.
Why it’s bad: This breaks the Single Responsibility Principle, making services hard to test, maintain, and reuse.

✅ Best Practice: Split services into smaller, focused ones. E.g., an ApiService, a UserService, and a NotificationService.

2. Not Unsubscribing from Observables in Services

Mistake: Subscribing to Observables (e.g., HTTP or BehaviorSubjects) in a service without proper cleanup.
Why it’s bad: This can lead to memory leaks or unexpected behavior, especially if the service isn’t singleton-scoped.

✅ Best Practice: Use RxJS operators like takeUntil, first, or take(1), or return observables to the component and let it handle subscriptions.

3. Circular Dependencies

Mistake: Two or more services depend on each other directly or indirectly, creating a circular reference.
Why it’s bad: This can lead to runtime errors, undefined injections, or Angular’s infamous Cannot instantiate cyclic dependency! error.

✅ Best Practice:

• Refactor shared logic into a third service that both original services can depend on.
• Use abstractions or interfaces to break the direct dependency chain.

// user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private authService: AuthService) {}
}

// auth.service.ts
@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private userService: UserService) {}
}

Conlusion

We’ve discussed some of the most common mistakes that can be encountered when writing Angular services, such as overloading our services with multiple responsibilities, forgetting to unsubscribe from Observables, and creating circular dependencies. I hope these insights can help to improve and maintain your current Angular projects and future ones to come. Happy Coding!