angular - Angular 4 での MdDialog

Question

Angular 4 で MdDialog を使用しようとしています。

ダイアログ HTML:

<div style="width: 100%">
    <h2>Dialog</h2>
    <button md-raised-button (click)="dialogRef.close()">Close dialog</button>
</div>

ダイアログ コンポーネント:

import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from "@angular/material";

@Component({
    selector: 'your-dialog-selector',
    templateUrl: './dialog.component.html'
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<any>) {
    }
}

html の呼び出し:

<md-icon class="demo-dialog-open-button" (click)="open()">
                view_list
            </md-icon>

コンポーネント関数の呼び出し:

open() {
        this.dialogRef = this.dialog.open(DialogComponent);

        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }

app.material.module:

import { NgModule } from '@angular/core';
import {
    MdToolbarModule,
    MdIconModule,
    MdMenuModule,
    MdButtonModule,
    MdSelectModule,
    MdSnackBarModule,
    MdSnackBar,
    MdInputModule,
    MdTooltipModule,
    MdCardModule,
    MdDialogModule
} from '@angular/material';

@NgModule({
    imports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputModule,
        MdTooltipModule,
        MdCardModule,
        MdDialogModule
    ],
    exports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputModule,
        MdTooltipModule,
        MdCardModule,
        MdDialogModule
    ],
    providers: [
        MdSnackBar
    ]
})
export class AppMaterialModule {}

私が抱えている問題は、ダイアログが画面の左側に垂直の空白の白いボックスとして開くことです。検査要素はこれを示しています：

<md-dialog-container class="mat-dialog-container ng-tns-c7-4 ng-trigger ng-trigger-slideDialog" role="dialog" style="transform: none; opacity: 1;"><!--bindings={
  "ng-reflect-portal": ""
}--></md-dialog-container>

ダイアログ HTML のコンテンツが表示されないのはなぜですか?