How to Fix Circular Dependency in Angular: Simple Steps

A circular dependency in Angular happens when two or more services or modules import each other directly or indirectly, causing an error. To fix it, refactor your code by removing direct imports between the dependent classes and use Angular's dependency injection with interfaces or abstract classes instead of concrete imports.

Why This Happens

Circular dependency occurs when two Angular services or modules depend on each other directly or through a chain of imports. This creates a loop that Angular cannot resolve, leading to runtime errors or build failures.

typescript

/* ServiceA.ts */
import { Injectable } from '@angular/core';
import { ServiceB } from './service-b';

@Injectable({ providedIn: 'root' })
export class ServiceA {
  constructor(private serviceB: ServiceB) {}
  getName() { return 'ServiceA'; }
}

/* ServiceB.ts */
import { Injectable } from '@angular/core';
import { ServiceA } from './service-a';

@Injectable({ providedIn: 'root' })
export class ServiceB {
  constructor(private serviceA: ServiceA) {}
  getName() { return 'ServiceB'; }
}

Output

Error: Circular dependency detected: ServiceA -> ServiceB -> ServiceA

The Fix

Break the circular dependency by introducing an abstraction or by injecting dependencies differently. One common way is to use Angular's Injector or to depend on interfaces instead of concrete classes. This removes the direct import loop.

typescript

/* IServiceA.ts */
export interface IServiceA {
  getName(): string;
}

/* ServiceA.ts */
import { Injectable } from '@angular/core';
import { IServiceA } from './i-service-a';

@Injectable({ providedIn: 'root' })
export class ServiceA implements IServiceA {
  getName() { return 'ServiceA'; }
}

/* ServiceB.ts */
import { Injectable, Injector } from '@angular/core';
import { IServiceA } from './i-service-a';
import { ServiceA } from './service-a';

@Injectable({ providedIn: 'root' })
export class ServiceB {
  private serviceA: IServiceA;

  constructor(private injector: Injector) {
    this.serviceA = this.injector.get(ServiceA);
  }

  getName() { return 'ServiceB'; }
}

Output

No circular dependency error; both services work correctly.

Prevention

To avoid circular dependencies in Angular, follow these best practices:

• Design services and modules with clear, one-way dependencies.
• Use interfaces or abstract classes to decouple implementations.
• Leverage Angular's dependency injection system instead of direct imports where possible.
• Use linting tools like circular-dependency-plugin to detect cycles early.
• Keep modules focused and avoid large, tightly coupled modules.

Related Errors

Other errors similar to circular dependency include:

• NullInjectorError: Happens when Angular cannot resolve a dependency, often due to missing providers.
• Module not found: Can occur if circular imports confuse the module loader.
• Stack overflow errors: Result from infinite loops caused by circular calls.

Fixes usually involve checking import paths and restructuring dependencies.

Key Takeaways

Circular dependencies happen when two or more Angular classes import each other directly or indirectly.

Break cycles by using interfaces, abstract classes, or Angular's Injector to delay dependency resolution.

Design your app with clear, one-way dependency flows to prevent circular imports.

Use linting tools to detect circular dependencies early during development.

Refactor large modules and services to keep dependencies simple and manageable.