How To Resolve Circular Dependency Error in Angular.

In Angular, sometimes your code gets stuck, like two friends asking each other the same question but never answering. This problem is called a Circular Dependency. It happens when two (or more) parts of your code depend on each other in a loop, and Angular doesn’t know where to start.

Before understanding the process of resolving Circular Dependency, let's first understand what Dependency is and why it is so important in building any software application.

What is Dependency?

In programming, a dependency is a relationship where one piece of code relies on another to function correctly. This is a fundamental concept in software development, as modern applications are rarely built from scratch. Instead, developers reuse existing, pre-written code in the form of libraries, frameworks, or modules.

Dependency Example:

Think of baking a cake. To make the cake (your code), you need flour, sugar, and eggs (dependencies). You don't have to create the flour or sugar yourself; you buy them from a store (like downloading from a library). Without these ingredients, you can't bake the cake. Your cake recipe depends on the ingredients.

In software, dependencies work the same way:

A component (like a button on a web page) might depend on a styling library to make it look good.
A service that handles user login might depend on a database library to interact with the database.

This dependency relationship is usually one-way. The button needs the styling library, but the styling library doesn't need to know anything about the button. The login service needs the database library, but the database library doesn't need to know anything about the login service.

When you have a dependency, if the code you're depending on changes or is unavailable, your code will likely fail. This is why managing dependencies is a crucial part of software development.

Understanding this one-way relationship is the key to grasping why a circular dependency, where two components depend on each other, is so problematic.

What is Circular Dependency?

A circular dependency occurs when two or more components, modules, or services depend on each other, creating a closed loop. This prevents them from being properly initialized or compiled because each one is waiting for the other to be ready first.

Imagine two people, Alice and Bob.

Alice says, "I can't start my project until Bob gives me his budget report."
Bob says, "I can't finish my budget report until Alice starts her project, so I can get the final numbers."

They are stuck in an eternal loop. Alice needs Bob's input to begin, and Bob needs Alice's progress to finish. Neither can move forward, and the project is deadlocked. This is a circular dependency.

In a software application, the same principle applies. For example, in a codebase:

UserService needs to call a method in PaymentService to process a transaction.
PaymentService needs to access a user's details, which it gets by calling a method in UserService.

This creates a tight coupling where UserService depends on PaymentService, and PaymentService depends on UserService. The system can't decide which service to initialize first, leading to errors. This anti-pattern indicates a poor design that makes the code difficult to maintain, test, and reuse.

Let's recreate circular dependency to understand the exact condition and how to resolve it.

Example of Circular Dependency in Angular.

user.service.ts

// user.service.ts
import { Injectable } from '@angular/core';
import { PaymentService } from './payment.service';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private paymentService: PaymentService) {}

  getUserDetails(userId: number) {
    console.log("Fetching user details for", userId);

    // Oh no ❌ UserService is calling PaymentService
    this.paymentService.getPaymentsForUser(userId);
  }
}

payment.service.ts

// payment.service.ts
import { Injectable } from '@angular/core';
import { UserService } from './user.service';

@Injectable({ providedIn: 'root' })
export class PaymentService {
  constructor(private userService: UserService) {}

  getPaymentsForUser(userId: number) {
    console.log("Fetching payments for", userId);

    // Oh no ❌ PaymentService is calling UserService again
    this.userService.getUserDetails(userId);
  }
}

This Angular code is trying to create a userService, but userService needs PaymentService. Then Angular tries to create PaymentService, but PaymentService needs userService. Angular goes back to create userService...and this cycle never ends. This is a circular dependency.

userService -> PaymentService -> userService

Error: Circular dependency in DI detected for UserService

We need to break the direct cycle by introducing a shared service or event mediator. Let's learn both methods one by one.

Method 1: Resolve Circular Dependency Using Shared Service.

This is the most popular and easiest way to break circular dependency by moving the common logic into a third service that both can use.

Here are a few simple steps that you need to follow:

1. Identify the code that causes a circular reference.

2. Create a new independent service.

3. Inject this service into both classes instead of injecting each other.

Fix Example:

This is a mediator service that holds the shared logic.

// data.service.ts
@Injectable({ providedIn: 'root' })
export class DataService {
  getUserDetails(userId: string) {
    console.log("Fetching user details:", userId);
  }

  getPaymentsForUser(userId: string) {
    console.log("Fetching payments for user:", userId);
  }
}

This is the modified userService after introducing the shared service.

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

  getUserDetails(userId: string) {
    this.data.getUserDetails(userId);
  }
}

This is the modified PaymentService after introducing the shared service.

// payment.service.ts
@Injectable({ providedIn: 'root' })
export class PaymentService {
  constructor(private data: DataService) {}

  getPaymentsForUser(userId: string) {
    this.data.getPaymentsForUser(userId);
  }
}

Now both services depend only on DataService → no cycle. This is cleaner and easier to maintain.

Method 2: Use forwardRef().

If the dependency is truly unavoidable (say, PaymentService must call UserService directly), we can use forwardRef().

How does forwardRef() Work?

In Angular, when you create a service or class, Angular tries to resolve all dependencies immediately at runtime.
But in circular dependency cases, one class might not be defined yet when Angular tries to use it.

👉 forwardRef() is a helper function that tells Angular:

“Don’t try to resolve this dependency right now — wait until everything is defined, and then resolve it.”

Fix Example:

// user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(
    @Inject(forwardRef(() => PaymentService)) private payment: PaymentService
  ) {}

  getUserDetails(userId: string) {
    console.log("Fetching user details:", userId);
    this.payment.getPaymentsForUser(userId);
  }
}

// payment.service.ts
@Injectable({ providedIn: 'root' })
export class PaymentService {
  constructor(
    @Inject(forwardRef(() => UserService)) private user: UserService
  ) {}

  getPaymentsForUser(userId: string) {
    console.log("Fetching payments for user:", userId);
    this.user.getUserDetails(userId);
  }
}

Now Angular delays resolution until both services are defined.

The circular error is avoided, but if you keep calling each other directly, there’s still a risk of infinite recursion, so use it carefully.