Angular2 MdDialog does not display content, only window displays

I am trying to use MdDialog for a popup. But it only shows a window with a space. It has no content.

dialog.component.ts:

import {Component, NgModule, ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';

@Component({
    selector: 'dialog',
    template: `
        <h1 md-dialog-title>Dialog</h1>
        <h2>Hi, I am the dialog</h2>
        <button md-raised-button (click)="dialogRef.close()">Close dialog</button>
    `
})

export class DialogComponent {
    constructor(public dialogRef : MdDialogRef<any>){};
}

      

        
        
        
      

    

fileuploader.component.ts

import { Component } from '@angular/core';
import '../../assets/css/styles.css';
import { FileUploader } from 'ng2-file-upload';
import { DialogComponent } from './dialog.component';
import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material';
import {NgModule, ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'file-uploader',
  templateUrl: '../templates/fileuploader.component.html',
  styleUrls: ['../css/fileuploader.component.css']
})

/** Class representing App Component. */
export class FileUploaderComponent {


  constructor(
    public dialog : MdDialog,
  ) {


      console.log("ImageUpload:uploaded:", item, status, response, headers);
      console.log("test");
      let dialogRef = this.dialog.open(DialogComponent, {
        height: '400px',
        width: '600px',
      });

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

      console.log("done");
    };
  }
}

      

        
        
        
      

    

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
import { AppComponent } from './components/app.component';
import { LoginComponent } from './components/login.component';
import { DashboardComponent } from './components/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoggedInGuard } from './common/logged-in.guard';
import { MaterialModule } from '@angular/material';
import { HeaderComponent } from './components/header.component';
import { FileUploaderComponent } from './components/fileuploader.component';
import { FileDropDirective, FileSelectDirective } from 'ng2-file-upload';
import { DialogComponent } from'./components/dialog.component';


/**
 * App Module
 * The app module handles all the imports,
 * declerations, exports and providers. Any new 
 * component need to be declared here.
 */

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
    RouterModule.forRoot(appRoutes), BrowserAnimationsModule,
    MaterialModule.forRoot()
  ],
  declarations: [
    AppComponent, LoginComponent, DashboardComponent, HeaderComponent,
    FileUploaderComponent, FileSelectDirective, FileDropDirective, DialogComponent
  ],
  entryComponents: [
    DialogComponent
  ],
  exports: [],
  providers: [LoggedInGuard],
  bootstrap: [AppComponent]
})
/** Class representing App Module. */
export class AppModule { }

      

        
        
        
      

    

What I assumed is a popup and shows a message in the dialog component "Hello, I'm a dialog". But right now, just an empty window.

Thank.