Can't resolve all parameters for MdlDialogReference

Question

I am trying to use angular2-mdl component and to display a dialog. Only when I need to use MdlDialogReference do I get this error. I can create the dialog provided I try not to inject MdlDialogReference.

I have seen other answers to somthing like this but I cannot seem to transfer that into my solution. What needs to be done to get this to not fail?

Some files: Using angular 2.4.1

package.json

... 
"dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.4.1",
    "@angular/upgrade": "2.4.1",
    "angular2-mdl": "^2.13.2",
    "core-js": "^2.4.1",
    "material-design-lite": "1.3.0",
...

system.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'rxjs': 'npm:rxjs',
            'angular2-mdl': 'npm:angular2-mdl'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-mdl': {
                main: 'bundle/angular2-mdl.js'
            }
        }
    });
})(this);

app.module.ts

//angular
import { MdlModule, MdlDialogReference } from 'angular2-mdl';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//routing
import { routing, appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';

//pages
...

//components
import { MessageDialogComponent } from './components/messageDialog.component';

@NgModule({
    imports: [
        BrowserModule,
        DateTimePickerModule,
        MdlModule,
        FormsModule,
        HttpModule,
        routing
    ],
    providers: [
        appRoutingProviders,
        MdlDialogReference,
        MessageDialogComponent,
    ],
    declarations: [
        AppComponent,
        MessageDialogComponent,
    ],
    bootstrap: [AppComponent],
    entryComponents: [MessageDialogComponent]
})
export class AppModule { }

messageDialog.component.ts

import { Component, OnInit, HostListener, Inject } from '@angular/core';

import { MdlDialogService, MdlDialogReference } from 'angular2-mdl';

@Component({
    moduleId: module.id,
    selector: 'message-dialog',
    templateUrl: 'messageDialog.component.html'
})
export class MessageDialogComponent implements OnInit {


    constructor(@Inject(MdlDialogReference) private dialog: MdlDialogReference)
    { }

    public ngOnInit() {

    }

    @HostListener('keydown.esc')
    public onEsc(): void {
        this.dialog.hide();
    }
}

Error: Can't resolve all parameters for MdlDialogReference: (?). at SyntaxError.ZoneAwareError (http://localhost:5111/node_modules/zone.js/dist/zone.js:992:33) at SyntaxError.BaseError [as constructor] (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:1590:18) at new SyntaxError (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) at CompileMetadataResolver._getDependenciesMetadata (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18477:33) at CompileMetadataResolver._getTypeMetadata (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18352:28) at CompileMetadataResolver._getInjectableMetadata (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18340:23) at CompileMetadataResolver.getProviderMetadata (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18582:42) at eval (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18540:51) at Array.forEach (native) at CompileMetadataResolver._getProvidersMetadata (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18507:21) at CompileMetadataResolver.getNgModuleMetadata (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18191:52) at JitCompiler._loadModules (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:27288:66) at JitCompiler._compileModuleAndComponents (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:27248:54) at JitCompiler.compileModuleAsync (http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:27214:23) at PlatformRef_._bootstrapModuleWithZone (http://localhost:5111/node_modules/@angular/core/bundles/core.umd.js:8496:29)

Answer 1

You're not able to use MdlDialogReference till a dialog is opened, so you can access it through the observable returned from showCustomDialog like this

this.dialogService.showCustomDialog({
  component: CustomDialogComponent, 
  providers: [{ provide: "data", useValue: data }],     
  isModal: true,
  clickOutsideToClose: true
}).subscribe( (ref: MdlDialogReference) => {
  ref.onHide().subscribe(() => {
    this.foo();
  })
});