Проблема с Angular2 Material dialog

Возникла проблема при добавлении компонента модального окна в angular 2. Окно создается, но не диалоговое.

Скрин

Добавляется как обычный блок div. В чем может быть проблема?

app.module.ts

import { MaterialModule } from '@angular/material';
@NgModule({
  declarations: [
    ...
    DialogComponent
 ],
  imports: [
    ...
    MaterialModule.forRoot()
  ]
})

dialog.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';
import { DialogComponent } from '../shared/dialog.component';
@Component({
    moduleId: module.id,
    selector: 'dialog-page',
    templateUrl: 'dialog.component.html'
})
export class SettingsComponent {
    dialogRef: MdDialogRef<any>;
    constructor(public dialog: MdDialog,
        public viewContainerRef: ViewContainerRef) { }
    open(key) {
        let config = new MdDialogConfig();
        config.viewContainerRef = this.viewContainerRef;
        this.dialogRef = this.dialog.open(DialogComponent, config);
        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }
}