title: NullInjectorError: No provider for MatDialogRef
body: <p>I can't inject MatDialogRef as it described in documentation: <a href="https://material.angular.io/components/dialog/overview" rel="noreferrer">https://material.angular.io/components/dialog/overview</a></p>
  
  <p>When i'm trying to do it i'v got error:</p>
  
  <p>ERROR Error: StaticInjectorError[MatDialogRef]:
  StaticInjectorError[MatDialogRef]:
  NullInjectorError: No provider for MatDialogRef!</p>
  
  <p>app.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 {}</code></pre>
  </div>
  </div>
  </p>
  
  <p>home.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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, {});
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>registration.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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&lt;RegistrationComponent&gt;
   )
   {
    this.isLoading = false;
   }
  
   public onSubmit(e) :void
   {
    e.preventDefault();
    this.isLoading = true;
  
    this.userService
     .Create(this.user)
     .subscribe(
      user =&gt;
      {
       this.user.id = user.id;
       this.user.login = user.login;
  
  
       this.authService
        .Login(this.user)
        .subscribe(
         token =&gt;
         {
          this.accountService.Load()
           .subscribe(
            account =&gt;
            {
             this.user = account;
             this.isLoading = false;
             this.dialogRef.close();
  
             let redirectRoute = account.activeScopeId
              ? `/scope/${account.activeScopeId}`
              : '/scope-list/';
  
             this.router.navigate([redirectRoute]);
            },
            error =&gt; this.errorMessage = &lt;any&gt;error
           );
         },
         error =&gt; this.errorMessage = &lt;any&gt;error
        );
      },
      error =&gt; this.errorMessage = &lt;any&gt;error
     );
   }
  }</code></pre>
  </div>
  </div>
  </p>