No provider for MdDialog error

Question

I am trying to use MdDialog from the material module of Angular 2. I have a component that I am trying to use a dialog in shown below:

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

import { Aircraft } from '../shared/aircraft';
import { AircraftService } from '../shared/aircraft.service';
import { MdDialog, MdDialogRef } from '@angular/material';
import { NewAircraftDialogComponent } from '../new-aircraft-dialog/new-aircraft-dialog.component';

@Component({
  selector: 'app-statusboard',
  templateUrl: './statusboard.component.html',
  styleUrls: ['./statusboard.component.css']
})
export class StatusboardComponent implements OnInit {
  aircrafts: Aircraft[] = [];

  constructor(private aircraftService: AircraftService,
              public dialog: MdDialog) { }

  ngOnInit(): void {
    this.aircraftService.getAircrafts()
      .then(aircrafts => this.aircrafts = aircrafts);
  }

  openNewAircraftDialog(): void {
    let dialogRef = this.dialog.open(NewAircraftDialogComponent, {
      width: '300px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

And the dialog component is shown below:

import { Component, OnInit } from '@angular/core';
import { Aircraft } from '../shared/aircraft';
import { AircraftService } from '../shared/aircraft.service';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'app-new-aircraft-dialog',
  templateUrl: './new-aircraft-dialog.component.html',
  styleUrls: ['./new-aircraft-dialog.component.css']
})
export class NewAircraftDialogComponent implements OnInit {

  newAircraft: Aircraft;

  constructor(private aircraftService: AircraftService,
              public dialogRef: MdDialogRef<NewAircraftDialogComponent>) { }

  ngOnInit() {
  }

  onSubmitClick(): void {
    this.dialogRef.close();
  }

  onCloseClick(): void {
    this.dialogRef.close();
  }

}

But I am getting an error in the console:

Error: Uncaught (in promise): Error: No provider for MdDialog!

Looking around online, it says to add "entryComponents: [NewAircraftDialogComponent]" to NgModule. I did, but that hasn't solved the issue.

score 4 · Accepted Answer · edited Mar 25 '18 at 01:47

4

I found the answer.

I imported MdDialog and MdDialogRef into my components, but I did not import the MdDialogModule. I added MdDialogModule to my app.module.ts imports and everything works fine!

Related question and answer: Angular EXCEPTION: No provider for Http

edited Mar 25 '18 at 01:47

Ronan Boiteau

9,608
6
34
56

answered Sep 24 '17 at 01:31

FriendlyPigeon

59
1
7

score 0 · Answer 2 · answered Sep 24 '17 at 05:11

add this in module.ts import {MdDialogModule} from '@angular/material';

@NgModule({ declarations: [ ' ' '], imports: [ ' ' ], providers: [ MdDialogModule ]}

add this in module.ts
import {MdDialogModule} from '@angular/material';

@NgModule({
 declarations: [
'
'
'],
    imports: [
'
'
],
 providers: [
        MdDialogModule
    ]}

No provider for MdDialog error

2 Answers2