Components: MatDialog: cyclic dependency when using MatDialog in a HTTP_INTERCEPTORS

Created on 7 Mar 2018 · 8Comments · Source: angular/components

Bug (or odd edge case):

I use MatDialog in a HTTP_INTERCEPTORS to display a dialog if the HttpClient responds with a 401. This start causing "cyclic dependency" errors when HttpClient is a dependency for APP_INITIALIZER.

What is the expected behavior?

No "cyclic dependency" errors.

What is the current behavior?

This might happen due to the Overlay (used in MatDialog constructor) injecting the ApplicationRef that's already imported by ApplicationModule . This error is thrown during resolving of deps for APP_INITIALIZER.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-7vxrxf

Source

fredrikredflag

Most helpful comment

You should be able to do something like this:

@Injectable()
export class UnauthorizedHook implements HttpInterceptor {
    private _dialog: MatDialog;
    private _injector: Injector;

    constructor (
        injector: Injector
    ) {
        this._injector = injector;
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!this._dialog) {
            this._dialog = this._injector.get(MatDialog);
        }

        this._dialog.open(CustomErrorDialogComponent);
  }
}

fredrikredflag on 20 Mar 2018

❤1 👍1

All 8 comments

I am facing the exactly similar issue and was not sure how to solve this.
@fredrikredflag were you able to find a fix for this.

rajpat on 19 Mar 2018

@rajpat You can use the Injector to get workaround this issue:

@Injectable()
export class UnauthorizedHook implements HttpInterceptor {
    private _injector: Injector;
    private _reauthorizeWorkflow: ReauthorizeWorkflow;

    constructor (
        injector: Injector
    ) {
        this._injector = injector;
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!this._reauthorizeWorkflow) {
            this._reauthorizeWorkflow = this._injector.get(ReauthorizeWorkflow);
        }
        ....
  }
}

Here ReauthorizeWorkflow is using MatDialog.

fredrikredflag on 19 Mar 2018

So how to open/show the ReauthorizeWorkflow dialog?

In my case I have a dialog like this which I want to open from my error handler -

import { Component, Inject, Injectable } from "@angular/core";
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from "@angular/material";

@Component({
selector: "error-dialog-component",
templateUrl: "custom-error-dialog-component.html"
})
export class CustomErrorDialogComponent {
constructor(
private dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any
) {}

public closeDialog() {
this.dialogRef.close();
}
}

From my error handler service I want to to open the the CustomErrorDialogComponent which I can't do as I need call open method of matdialog for which I need to have a matdialog injected which what is causing the cyclic issue.

rajpat on 19 Mar 2018

You should be able to do something like this:

@Injectable()
export class UnauthorizedHook implements HttpInterceptor {
    private _dialog: MatDialog;
    private _injector: Injector;

    constructor (
        injector: Injector
    ) {
        this._injector = injector;
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!this._dialog) {
            this._dialog = this._injector.get(MatDialog);
        }

        this._dialog.open(CustomErrorDialogComponent);
  }
}

fredrikredflag on 20 Mar 2018

❤1 👍1

That did it.
Thanks for your help.

rajpat on 20 Mar 2018

Closing as a dupe of https://github.com/angular/material2/issues/10967 which will be fixed by https://github.com/angular/material2/pull/10975.