Circular dependency when referencing component type

Issue

I have a single service to open a number of dialogs, some of those dialogs can open other dialogs using the same service that opened them. I'm using a dynamic dialog service from PrimeNg to open a dialog component by Type<any>.

When referencing .ts file for the type I get WARNING in Circular dependency detected. Note that everything does still actually work, just warnings in the log which are ugly.

I get that I should be having issues if I was trying to inject the type into the service, but I'm just getting the type so that the dynamic dialog can instantiate it.

Is there a way to get around this?

test.component.ts

import { Component, OnInit } from '@angular/core';

import { OpenDialogService } from './open-dialog.service';

@Component({
  selector: 'test',
  template: `<dialog></dialog>`,
  styles: [],
  providers: []
})
export class TestComponent implements OnInit {

  constructor(private openDialogService: OpenDialogService) { }

  ngOnInit() { }

  public openOther() {
    this.openDialogService.openOtherDialog();
  }
}

open-dialog.service.ts

import { Injectable } from '@angular/core';

import { Observable, of, } from 'rxjs';

import { DialogService } from 'primeng/dynamicdialog';

import { TestComponent } from './test.component';

@Injectable({ providedIn: 'root' })
export class OpenDialogService {

  constructor(private dialogService: DialogService) {
  }

  public openTestDialog(): Observable<any> {
    return this.dialogService.open(TestComponent);
  }

  public openOtherDialog(): Observable<any> {
    return of(null);
  }
}

Output:

WARNING in Circular dependency detected:
src\app\open-dialog.service.ts -> src\app\test.component.ts -> src\app\open-dialog.service.ts

Because all the issues I'm finding when googling this are related to injecting in a loop I even went ahead and tried the injector delay in the test component:

...
export class TestComponent implements OnInit {
  private _openDialogService: OpenDialogService;
  private get openDialogService(): OpenDialogService {
    return this._openDialogService
      ? this._openDialogService
      : this._openDialogService = this.injector.get<OpenDialogService>(OpenDialogService);
  }

  constructor() { }
  ...
}

But of course it doesn't actually solve it, because this isn't related to dependency injection, just file referencing.

Solution

For anyone else trying to figure this out, ended up making a new file and filling it tokens:

dialog-tokens.ts

import { InjectionToken } from '@angular/core';

export const TEST_DIALOG: InjectionToken<string> = new InjectionToken<string>('TEST_DIALOG');
export const TEST_DIALOG2: InjectionToken<string> = new InjectionToken<string>('TEST_DIALOG2');
.
.

Then providing all the dialog component ComponentType's with those tokens at the module level:

  providers: [
    { provide: TEST_DIALOG, useValue: DynamicTestDialogComponent },
    { provide: TEST_DIALOG2, useValue: DynamicTestDialog2Component},
  .
  .

This has the unfortunate side effect of having to remove the {providedIn:'root'} from all services in the feature module and provide them at the same level beneath the tokens.

But then I could finally inject the component types into the service:

@Injectable({ providedIn: 'root' })
export class OpenDialogService {

  constructor(
  @Inject(TEST_DIALOG) private dynamicTestDialogComponent: ɵComponentType<any>,
  @Inject(TEST_DIALOG2) private dynamicTestDialog2Component: ɵComponentType<any>,
  ) { }

  public openTestDialog(): Observable<any> {
    return this.dialogService.open(this.dynamicTestDialogComponent);
  }

  public openOtherDialog(): Observable<any> {
    return this.dialogService.open(this.dynamicTestDialog2Component);
  }
}

No compiler warnings and everything works as expected. Not in love with it and miss being able to just provide it all to root, but for now this the best I've got.

Answered By - Wrightboy