title: MatDialog not showing
body: <p>I want to add a dialog to my application, but for some reason it is not showing.</p>
  
  <p>The dialog component:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import {MatDialogRef} from "@angular/material";
  
  @Component({
    selector: 'app-connect-to-player-dialog',
    templateUrl: './connect-to-player-dialog.component.html',
    styleUrls: ['./connect-to-player-dialog.component.css']
  })
  export class ConnectToPlayerDialogComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>The method used:</p>
  
  <pre class="lang-ts prettyprint-override"><code>connectToPlayer() {
      const dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
  
      this.dialog.open(ConnectToPlayerDialogComponent, dialogConfig);
    }
  </code></pre>
  
  <p>And I also added the dialog to <code>entryComponents</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>entryComponents: [ConnectToPlayerDialogComponent]
  </code></pre>
  
  <p>I have no idea what could be missing... Thank you for any help!</p>
  
  <p>Full Code:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, OnInit} from '@angular/core';
  import {PLAYERS} from '../mock-players';
  import {Router} from "@angular/router";
  import {AlertService, AuthenticationService} from "../_services";
  import {HttpClient} from "@angular/common/http";
  import {AuthGuard} from "../_guards";
  import {MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material';
  import {ConnectToPlayerDialogComponent} from "../connect-to-player-dialog/connect-to-player-dialog.component";
  
  @Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
  })
  export class ProfileComponent implements OnInit {
  
    players = PLAYERS;
    c: MatDialogRef&lt;ConnectToPlayerDialogComponent&gt;;
  
    constructor(private autheGuard: AuthGuard,
                private authenticationService: AuthenticationService,
                private alertService: AlertService,
                private http: HttpClient,
                private router: Router,
                private dialog: MatDialog) {
    }
  
    ngOnInit() {
      this.loadPlayers();
      this.connectToPlayer();
    }
  
    loadPlayers() {
  
      this.authenticationService.loadPlayersForPlayer(this.autheGuard.getUser().identityStr)
        .subscribe(
          data =&gt; {
            this.players = data;
            this.players.unshift(this.autheGuard.getUser());
            //if (data.identityStr) {
              //localStorage.setItem('currentUser', JSON.stringify(data));
              //PdHeaderComponent.updateUserStatus.next(true);
              //this.router.navigate(['']);
           // } else {
  
            //}
            // this.alertService.success('Successfully logged in');
          },
          error =&gt; {
            let errormsg: string = 'Unexspected Error occured.';
            if (error.code == 401) {
              errormsg = 'Wrong Playername or Password.';
            }
            this.alertService.error(errormsg);
          });
    }
  
    connectToPlayer() {
      const dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
  
      this.c = this.dialog.open(ConnectToPlayerDialogComponent, {
        width: '400px'});
    }
  
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;
    connect-to-player-dialog works!
  &lt;/p&gt;
  </code></pre>
  
  <p>Exception:</p>
  
  <pre><code>ERROR Error: Found the synthetic listener @slideDialog.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
      at checkNoSyntheticProp (platform-browser.js:2991)
      at DefaultDomRenderer2.listen (platform-browser.js:2975)
      at DebugRenderer2.listen (core.js:15124)
      at listenToElementOutputs (core.js:10307)
      at createViewNodes (core.js:13416)
      at createRootView (core.js:13339)
      at callWithDebugContext (core.js:14740)
      at Object.debugCreateRootView [as createRootView] (core.js:14041)
      at ComponentFactory_.create (core.js:10960)
      at ComponentFactoryBoundToModule.create (core.js:3922)
  </code></pre>