NG0200: Circular dependency in DI detected，Why and How to do?

Question

I want inject ParentCompoent to ChildComponent，

But have a error is：

Error: NG0200: Circular dependency in DI detected for ParentComponent

parent Component：

@Component({
  selector: 'cy-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  providers: [
    {provide: ParentComponent, useExisting: forwardRef(() => ParentComponent)}
  ]
})

export class ParentComponent {
  constructor() { }
}

child component：

@Component({
  selector: 'cy-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],

})
export class ChildComponent implements OnInit {
  constructor(
    @SkipSelf() @Optional() public _parentComp?: ParentComponent
  ) {
   
   }
}

Answer 1

Ideally, you should not have this kind of logic in a component. It should be done as a service. The main issue is the lack of your routing module. Create a service that has two components. Inject Ur service into both components. Now the components don't know each other. Thus, u have no circular dependency. In order for the warning to go away, u should inject directly into the two components.

Basically parent component directly injected into the child component.

Otherwise, try separating the two files and matching them with a routing module

Answer 2

The issue is: in the parent component you are declaring a class "ParentComponent".

In the same file, inside the component decorator, you are injecting the same class as a service (providers array is for the services that are not provided in root/platform). Hence you are creating a circular dep.

To inject a child component inside a parent component, Angular offers ViewChild.

https://angular.io/api/core/ViewChild

This is a working example in stackblitz: https://stackblitz.com/edit/angular-ivy-mhctzk

Answer 3

I have same error but it was different

Here is my two files

1. userService.ts

import { Injectable, OnInit } from '@angular/core';
import firebase from 'firebase/compat/app';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/compat/database';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AuthService } from './auth.service';
import { AppUser } from '../models/app-user';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  
  constructor(private db: AngularFireDatabase, private auth: AngularFireAuth, private afauth: AuthService) {}

    save(user: firebase.User){
      this.db.object('/user/' + user.uid).update({
        name: user.displayName,
        email: user.email
      });
    }

    get(uid: string): AngularFireObject<AppUser | any> {
      return this.db.object('/users/' + uid);
  }
}

2. authService.ts

import { Injectable } from '@angular/core';
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import { UserService } from './user.service';



@Injectable({
  providedIn: 'root',
})


export class AuthService {
  user$: Observable<firebase.User | any>;

  //making observable of type any because .pipe() is not applicable to null

  constructor(
    public afAuth: AngularFireAuth,
    private route: ActivatedRoute,
    private userService: UserService) // Error is here
    {
    this.user$ = afAuth.authState
  }

  login() {
    let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
    localStorage.setItem('returnUrl', returnUrl);
    return this.AuthLogin(new GoogleAuthProvider());
  }

  async AuthLogin(provider: firebase.auth.AuthProvider) {
    try {
      const result = await this.afAuth.signInWithRedirect(provider);
      console.log(result, 'You have been successfully logged in!');
    } catch (error) {
      console.log(error);
    }
  }

  logout(){
    this.afAuth.signOut();
  }
}

I injected userService inside the constructor of authService constructor, so i sove it by removing it from userService because i never used it in authService.

Answer 4

I recently encountered this error after upgrading from Angular v12.x to v13.x. I actually didn't have any circular dependencies error. I followed the stack trace and found this gnarly error:

flat__WEBPACK_IMPORTED_MODULE_5___namespace_cache || (intermediate value)(intermediate value)) is not a function

I continued following the rabbit and eventually found that I had an issue in an imported internal library that was recently updated to Angular v13.x as well:

// This causes a runtime error in Angular v13+
import * as flatten from 'flat';

// But this works:
import flatten from 'flat';

After fixing this and republishing the library, the consuming package's "circular dependency" error was resolved. Very strange this came up though, instead of indicating an error in the imported library.