Problem with using Mat-Dialog in another injectable service in Angular

Issue

this is the module

    @NgModule({
        imports: [],
        declarations: [VariableDialogComponent],
        providers: [OutputFieldsService]
    })
    export class AModule {}

this is the OutputFieldsService

@Injectable()
export class OutputFieldsService {
    constructor(private dialog: MatDialog) {}
    public addParameter() {
    const dialogRef = this.dialog.open(VariableDialogComponent, {
        data: dt,
        disableClose: true,
        minWidth: '30%'
    });
    return dialogRef.afterClosed()
  }
}

and AModule is lazyloaded so every time I try to access that module will get this error

And from what I understand the error is very misleading

the error will disappear when I remove the open VariableDialogComponent dialog from the service

and the service and component are in the same module so I don't understand why I get this error

am I missing something?

Solution

I didn't find the reason why this is happening. but fix it with this method: im passing the component as an argument, this way I don't mention the VariableDialogComponent inside the service

Module

    @NgModule({
        imports: [],
        declarations: [VariableDialogComponent],
        providers: [OutputFieldsService]
    })
    export class AModule {}

OutputFieldsService

@Injectable()
export class OutputFieldsService {
    constructor(private dialog: MatDialog) {}
    public addParameter(component: ComponentType<any>) {
    const dialogRef = this.dialog.open(component, {
        data: dt,
        disableClose: true,
        minWidth: '30%'
    });
    return dialogRef.afterClosed()
  }
}

And then

this.outputFieldsService.addParameter(VariableDialogComponent)

Answered By - keyone2693