Components: No provider for MatDialogRef!

[ghost]

constructor(public dialog: DialogRef,
public dialogRef: MatDialogRef
)

Gives error 'No provider for MatDialogRef!'

[donroyco]

Have you added it to your module as a provider? Next to that: Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[ghost]

I tried to add MatDialogRef in providers array of module, but it gives an error 'can't resolve all parameters for MatdialogRef'

[jelbourn]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[praveeno]

@darshu514 are you find any solution of this issue No provider for MatDialogRef

[dennisvanbets]

Do you have a solution for this problem?

[ghost]

No, I think it’s an open issue. I found a work around by using https://github.com/shlomiassaf/ngx-modialog

The implementation is pretty simple

[praveeno]

got it, in my case there is two component one is DialogComponent and another is AddComponent from we open the dialog e.g , and i accidentally init DialogComponent without any provider like AddComponent, if i init DialogComponent from AddComponent like, this.dialog.open(DialogComponent',{}) , then it not give any error.

[mkamrani]

Same here, still no solution?

[praveeno]

@mkamrani create a question on stackoverflow, we all try to help

[unknown4unnamed]

Hey, Please try import MatDialog from @angular/material and provide it into providers array inside appModule.
Its worked for me.

[praveeno]

@unknown4unnamed +1

[javieraviles]

You will get that exact "No provider for MatDialogRef" error in case you include your dialog's component html selector in any html file.

<dialog-html-selector></dialog-html-selector>

There is no need for that, do not include the html selector of the dialog component anywhere. You will get the error otherwise

[ajspeller]

Is it possible to have a component that opens in a dialog on some occasions and also renders using the html selector on other occasions? I am trying to make a feature of my application responsive and when the display is small I want a dialog otherwise I want to render it with the html selector.

[javieraviles]

The thing is that your component is made for being loaded in a MatDialog because in your *.ts file you are surely getting in your constructor a MatDialogRef:

A dialog is opened by calling the open method with a component to be loaded and an optional config object. The open method will return an instance of MatDialogRef:

let dialogRef = dialog.open(UserProfileComponent, {
  height: '400px',
  width: '600px',
});
The MatDialogRef provides a handle on the opened dialog. It can be used to close the dialog and to receive notification when the dialog has been closed.

dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`); // Pizza!
});

dialogRef.close('Pizza!');

Maybe you can have a more general component specific for loading dialogs with the structure of a dialog in the dom with "mat-dialog-title", "mat-dialog-content", "mat-dialog-actions"... Receiving in the data (MAT_DIALOG_DATA) the parameters of title and actions and then within the content section of the dialog you can load the component you want to use also in the DOM with the selector??

I am not an angular expert but it is the best idea I can think of now.

[marylly]

I removed the dialog component selector and it worked fine! :)
It was like this:

@Component({ selector: 'app-users-dialog', templateUrl: './users-dialog.component.html', styleUrls: ['./users-dialog.component.css'] })

And I changed to:
@Component({ templateUrl: './users-dialog.component.html', styleUrls: ['./users-dialog.component.css'] })

[Ghost990]

@marylly Thank you, same here.
It's kind of logic if you think about there is no selector for the modal content, but I haven't found any documentation about it. Thanks again!

[Ukmandal]

Can anyone please Help me with this?

compiler.js?dd9e:485 Uncaught Error: Unexpected value 'MatDialogRef' imported by the module 'AppModule'. Please add a @NgModule annotation.

[javieraviles]

@Ukmandal could you please provide your app.module.ts? Or the correspondant module of the view your are trying to load the modal in? I think you are declaring MatDialogRef on it or something like that instead of the MatDialogModule

[sainture]

I'm having the same issue.
I have a form component which sometimes I need to display in a modal dialog and sometimes as an independent page (by navigation).
It works fine in the modal but when I try to navigate to that page, I get this error
"NullInjectorError: No provider for MatDialogRef!"

[cole21771]

For me, none of these solutions worked. However, what did work for me was stubbing out the MatDialogRef. You solve you problem like this:
Below your imports:
const matDialogRefStub = {};

Add this to the providers section of your testbed config:
{provider: MatDialogRef, useValue: matDialogRefStub}

Also, don't forget to have MatDialog as a provider as well.

That should be it, goodluck!

[antony-booth]

{ provide: MatDialogRef, useValue: {} }

Thanks @cole21771

[dpetla]

Because MatDialog instantiates components at run-time, the Angular compiler needs extra information to create the necessary ComponentFactory for your dialog content component.

For any component loaded into a dialog, you must include your component class in the list of entryComponents in your NgModule definition so that the Angular compiler knows to create the ComponentFactory for it.

https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code-

[crazyrich]

Thanks @javieraviles. Solution worked fine for me.

[almcaffee]

I did not have this issue in my component but when attempting to run my unit tests I was receiving this error. The way i solved it was ....

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ HttpModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatIconModule,
      MatStepperModule,
      HttpClientTestingModule,
      MatDialogModule,
      RouterTestingModule ],
      declarations: [ DialogueComponent ],
      providers: [ EnrollmentService,
      { provide: MatDialogRef, useValue: {} },
      { provide: MAT_DIALOG_DATA, useValue: {} }],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
  }));

Hope this helps someone else

[elunaNeo]

None of those solutions worked for me. I Have something like this:

TestBed.configureTestingModule({
      imports: [ MatDialogModule],
      declarations: [ DummyModalComponent,
        TranslatePipe,
        DummyComponent],
      providers: [ TranslateService, HttpClient, HttpHandler, MatDialog, MatDialogRef,
        { provide: MatDialogRef, useValue: {} },
        { provide: MAT_DIALOG_DATA, useValue: {} }
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();

And still says this:

 Failed: Can't resolve all parameters for MatDialogRef: (?, ?, ?, ?).
        Error: Can't resolve all parameters for MatDialogRef: (?, ?, ?, ?).
            at syntaxError node_modules/@angular/compiler/fesm5/compiler.js:1016:1)
            at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata node_modules/@angular/compiler/fesm5/compiler.js:10917:1)
            at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata node_modules/@angular/compiler/fesm5/compiler.js:10810:1)
            at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata node_modules/@angular/compiler/fesm5/compiler.js:11032:1)
            at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata node_modules/@angular/compiler/fesm5/compiler.js:11041:1)
            at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:10979:1
            at Array.forEach (<anonymous>)
            at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata node_modules/@angular/compiler/fesm5/compiler.js:10939:1)
            at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata node_modules/@angular/compiler/fesm5/compiler.js:10658:1)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules node_modules/@angular/compiler/fesm5/compiler.js:23850:1)

Am I missing something?

[almcaffee]

@elunaNeo remove MatDialogRef from providers array... only use { provide: MatDialogRef, useValue: {} }

[kimamula]

I don't think using dialogs like this is a good practice as it avoids using @Input() and @Output() in dialog components.

let dialogRef = dialog.open(UserProfileComponent, {
  height: '400px',
  width: '600px',
});

I prefer always using templates.
This is possible as Angular Material provides dialogRef to dialog components via the context.

You can put your dialog in a template like this.

<ng-template #dialogComponent let-dialogRef="dialogRef">
  <my-dialog [dialogRef]="dialogRef"></my-dialog>
</ng-template>

This dialog can be opened as follows.

@ViewChild('dialogComponent')
dialogComponent: TemplateRef<any>;

constructor(private dialog: MatDialog) {}

openDialg() {
  this.dialog.open(this.dialogComponent);
}

The dialog component can access MatDialogRef via @Input().

@Component({
  selector: 'my-dialog',
  template: `<button (click)="dialogRef.close('Hi')">Close</button>`
})
export class DialogComponent  {
  @Input() dialogRef: MatDialogRef<DialogComponent>;
}

This way, you don't need to inject MatDialogRef instance into your dialog component's constructor and so the problem does not happen.

You can see the working example on Stackblitz.

[MohitKS5]

@almcaffee @cole21771 that removes all methods from the matDialogRef, you can't use like dialogRef.close() and similar.

[vugar005]

@almcaffee @cole21771 that removes all methods from the matDialogRef, you can't use like dialogRef.close() and similar.

In that case you should import it with @Optional tag.

contrstructor(@Optional() public dialogRef: MatDialogRef<YourComponentt>) {}

So you template can be used as dialog and html selector

[trumbitta]

@vugar005 can you elaborate on "So you template can be used as dialog and html selector" ?

[vugar005]

@trumbitta Just add component to declarations and entryComponents. When you inject dialogRef do in the above way. This means dialogRef is optional and do not complain when it is not available(in case html selector).

[ShivPandey]

Specifying global configuration defaults Default dialog options can be specified by providing an instance of MatDialogConfig for MAT_DIALOG_DEFAULT_OPTIONS in your application's root module.

@NgModule({ providers: [ {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}} ] })

See this

[Yeras]

I did not have this issue in my component but when attempting to run my unit tests I was receiving this error. The way i solved it was ....

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ HttpModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatIconModule,
      MatStepperModule,
      HttpClientTestingModule,
      MatDialogModule,
      RouterTestingModule ],
      declarations: [ DialogueComponent ],
      providers: [ EnrollmentService,
      { provide: MatDialogRef, useValue: {} },
      { provide: MAT_DIALOG_DATA, useValue: {} }],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
  }));

Hope this helps someone else

Thank you very much. You really helped me!!!