Custom dialog circular dependency

Question

I'm running into a circular dependency created by my custom Injector The code runs fine until it reaches this line:

const componentPortal = new ComponentPortal(ConfirmDialogComponent, null, customInjector);

Which produces the following error in the terminal and browser's console:

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

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

And produces this error in the browser's console:

Uncaught Error: Can't resolve all parameters for ConfirmDialogComponent: (?).

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

  constructor(
    private overlay: Overlay,
    private injector: Injector,
  ) { }

  public open() {
    const overlayRef = this.overlay.create();
    const dialogRef = new CustomOverlayRef(overlayRef);
    const customInjector = this.createInjector(dialogRef);
    const componentPortal = new ComponentPortal(ConfirmDialogComponent, null, customInjector);
    const componentRef = overlayRef.attach(componentPortal);
  }

  private createInjector(customOverlayRef: CustomOverlayRef) {
    const injectionTokens = new WeakMap();
    injectionTokens.set(CustomOverlayRef, customOverlayRef);
    return new PortalInjector(this.injector, injectionTokens);
  }
}

export class CustomOverlayRef {

  constructor(
    private overlayRef: OverlayRef,
  ) { }

  public close() {
    this.overlayRef.dispose();
  }

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss']
})
export class ConfirmDialogComponent implements OnInit {

  constructor(
    private customDialogRef: CustomOverlayRef,
  ) { }

  ngOnInit() {
  }

  public close() {
    this.customDialogRef.close();
  }

}

Please add the relevant part of the `ConfirmDialogComponent`. You have probably mutually imported component into the service and vice versa. Bu the way this isn't an error but the warning which you shouldn't ignore of course. Same as here: https://stackoverflow.com/questions/46113734/angular-4-circular-dependency-detected?rq=1 — maljukan, Sep 05 '18 at 22:56
I added the `ConfirmDialogComponent` code. It prevents the app from loading due to an error which I forgot to mention. — Ploppy, Sep 05 '18 at 23:55

score 1 · Accepted Answer · answered Sep 19 '18 at 19:42

1

The problem of the circular dependency was cause by the declaration of the CustomOverlayRef class in the service.

It also cause the program to crash all together.

I declared it in a separate folder and now everything works as expected.

answered Sep 19 '18 at 19:42

Ploppy

14,810
6
41
58

But don't you still get a compile warning? I have the exact same setup and I get warnings....no errors and it works....but warnings. – Tony Smith Apr 20 '21 at 15:07

score 0 · Answer 2 · answered Sep 06 '18 at 00:09

0

This sometimes happens using the providedIn parameter in the @Injectable of your service. Try removing it from that location and adding it in the providers section of your app.module.

@Injectable()
export class ConfirmDialogService

app.module:

providers: [ConfirmDialogService]

answered Sep 06 '18 at 00:09

Joel Richman

1,894
12
13

Unfortunately I already tried this. Both the warnings and the error are still showing. – Ploppy Sep 06 '18 at 10:19

Custom dialog circular dependency

2 Answers2