MatDialog not showing

问题

I want to add a dialog to my application, but for some reason it is not showing.

The dialog component:

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() {
  }

}

The method used:

connectToPlayer() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    this.dialog.open(ConnectToPlayerDialogComponent, dialogConfig);
  }

And I also added the dialog to entryComponents:

entryComponents: [ConnectToPlayerDialogComponent]

I have no idea what could be missing... Thank you for any help!

Full 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<ConnectToPlayerDialogComponent>;

  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 => {
          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 => {
          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'});
  }

}

Template:

<p>
  connect-to-player-dialog works!
</p>

Exception:

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)

回答1:

As in the chat mentioned: The import of the BrowserAnimationsModule was missing

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  // ...
  imports: [BrowserAnimationsModule],
  // ...
})

回答2:

That may help:

• make sure you injected public dialog: MatDialog in component
• inject public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, @Inject(MAT_DIALOG_DATA) public data: any in your dialog component
• instead of new Config try to pass as second parameter to open method this and check if it's working { width: '250px' }

来源：https://stackoverflow.com/questions/49414975/matdialog-not-showing