Angular/Typescript - Getting Warning for Circular dependency

Question

I am facing circular dependency warning in my current project. I need some help to fix this warning issue. I have searched StackOverflow or tech blogs to fix this issue. Unfortunately, I am ending with no proper solution. It will greater if someone helps me with this.

Below is the project folder structure.

src
 app
  services
   slice
    slice.service.ts
  slices
   home
    help
     help.component.html
     help.component.ts
    home.module.ts
   index.ts

WARNING in Circular dependency detected: src\app\slices\home\help\help.component.ts -> src\app\services\slice\slice.service.ts -> src\app\slices\index.ts -> src\app\slices\home\help\help.component.ts

help.component.ts

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
import { select, Store } from '@ngrx/store'
import { Observable } from 'rxjs'

// components
import { BaseSliceComponent } from '@app/components/slice/base-slice.class'

// services
import { SliceService } from '@app/services/slice/slice.service'

// models
import { SliceOptions } from '@app/models/slice/slice.model'

// selectors
import config from './store/victims.selector'

@Component({
  selector: 'app-help',
  templateUrl: './help.component.html',
  styleUrls: ['./help.component.scss'],
})
export class HelpComponent extends BaseSliceComponent implements OnInit {
  config: Observable<SliceOptions> = this.store.pipe(select(config))

  constructor(private store: Store<any>, private sliceService: SliceService) {
    super()
  }

  ngOnInit(): void {}

}

slice.service.ts

import {
  ComponentRef,
  Injectable,
  ViewContainerRef
} from '@angular/core'
import { Router } from '@angular/router'
import { Store } from '@ngrx/store'

import SliceMap from '@app/slices'

import { SliceNameKeys } from '@app/models/slice/slice.model'

@Injectable({
  providedIn: 'root'
})
export class SliceService {
  private sliceStack: ComponentRef<any>[] = []

  private sliceHost!: ViewContainerRef

  constructor(
    private store: Store<any>,
    private router: Router,
  ) {  }

  create(
    name: SliceNameKeys,
    id?: string | undefined,
    shouldClear?: boolean,
    index?: number
  ) {
    id = id ?? name // if no id specified keep name as id

    const slice = SliceMap[name]
  }

}

slices/index.ts

import { SliceNames } from '@app/models/slice/slice.model'

// components
import { AboutUsComponent } from './home/aboutus/aboutus.component'
import { HelpComponent } from './home/help/help.component'

const SliceMap: SliceNames = {
  help: HelpComponent,
  aboutUs: AboutUsComponent
}

export default SliceMap

base-slice.class.ts

export abstract class BaseSliceComponent {
  id = ''
}

Answer 1

There is no right solution or tool that can find circulation dependency automatically in your project.

You just need to carefully check each service and injectable that is not circularly dependent.

Like

A->B and B->A

You need to check-in each service dependency as well.