NullInjectorError: No provider for MatDialogRef

Question

I can't inject MatDialogRef as it described in documentation: https://material.angular.io/components/dialog/overview

When i'm trying to do it i'v got error:

ERROR Error: StaticInjectorError[MatDialogRef]: StaticInjectorError[MatDialogRef]: NullInjectorError: No provider for MatDialogRef!

app.module.ts

import { NgModule }      from '@angular/core';  import { BrowserModule } from '@angular/platform-browser';  import { FormsModule }   from '@angular/forms';    import {  	MatInputModule,  	MatDialogModule,  	MatProgressSpinnerModule,  	MatButtonModule,  	MatDialog,  	MatDialogRef  } from '@angular/material';    import { ApiModule } from '../api/api.module';  import { RoutingModule } from '../routing/routing.module';    import { RegistrationComponent } from './components/registration.component';  import { LoginComponent } from './components/login.component';    import { AccountService } from './services/account.service';    @NgModule({  	imports: [  		BrowserModule,  		MatInputModule,  		MatDialogModule,  		MatProgressSpinnerModule,  		MatButtonModule,  		FormsModule,  		RoutingModule,  		ApiModule  	],  	declarations: [  		RegistrationComponent,  		LoginComponent  	],  	entryComponents: [  		LoginComponent,  		RegistrationComponent  	],  	providers: [  		AccountService,  		MatDialog,  		MatDialogRef  	]  })  export class AccountModule {}

home.component.ts

import { Component } from '@angular/core';    import { MatDialog } from '@angular/material';  import { RegistrationComponent } from '../account/components/registration.component';    @Component({      moduleId: module.id.replace('compiled', 'app'),      templateUrl: 'home.component.html'  })  export class HomeComponent  {      constructor(private modalService: MatDialog) {}        public openModal() : void      {          let dialog = this.modalService.open(RegistrationComponent, {});      }  }

registration.component.ts

import { Component } from '@angular/core';  import { Router } from '@angular/router';  import { MatDialogRef } from '@angular/material/dialog';    import { User } from '../../../models/domain/User';  import { ApiUserService } from '../../api/entity-services/user.service';  import { AuthService } from '../../auth/auth.service';  import { AccountService } from '../services/account.service'    @Component({  	selector: 'registration-component',  	templateUrl: 'app/modules/account/templates/registration.component.html'  })  export class RegistrationComponent  {  	public user :User = new User();    	public errorMessage :string;    	public isLoading :boolean;    	constructor  	(  		private userService :ApiUserService,  		private authService :AuthService,  		private accountService :AccountService,  		private router :Router,  		public dialogRef :MatDialogRef<RegistrationComponent>  	)  	{  		this.isLoading = false;  	}    	public onSubmit(e) :void  	{  		e.preventDefault();  		this.isLoading = true;    		this.userService  			.Create(this.user)  			.subscribe(  				user =>  				{  					this.user.id = user.id;  					this.user.login = user.login;      					this.authService  						.Login(this.user)  						.subscribe(  							token =>  							{  								this.accountService.Load()  									.subscribe(  										account =>  										{  											this.user = account;  											this.isLoading = false;  											this.dialogRef.close();    											let redirectRoute = account.activeScopeId  												? `/scope/${account.activeScopeId}`  												: '/scope-list/';    											this.router.navigate([redirectRoute]);  										},  										error => this.errorMessage = <any>error  									);  							},  							error => this.errorMessage = <any>error  						);  				},  				error => this.errorMessage = <any>error  			);  	}  }

Answer 1

I had this error when adding dialogs to a service to be shared in many components. Just to clarify, the error wasn't present in the application before moving dialogs to the service. The solution was to include a custom provider MatDialogRef in the main module

  import { DialogService } from './services/dialog.service';   import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';   ...   imports: [     ...     MatDialogModule   ],   providers: [      {        provide: MatDialogRef,        useValue: {}      },      DialogService   ],   ... 

With this provider the service worked as a singleton with my dialogs to be shared and the provider error was gone.

Answer 2

Thanks to the @Edric, i'v solved the problem by importing MatDialogModule, MatDialog and MatDialogRef from @angular/material/dialog instead of @angular/material