No provider for MdDialogRef

Question

I reoponed this issue since it didn't solve my problem in a similar discusion.

I still have the error 'No provider for MdDialogRef' even after i followed the official tutorial step by step.

I have two components. First component :

import { MdDialog} from "@angular/material";

import { DocumentDialogComponent } from './document-dialog.component';    

@Component({
  selector: 'documents-list',
  template
})
export class DocumentsListComponent {

  constructor(
     public dialog: MdDialog) {
  }

  openFormDialog() {

   let dialogRef  = this.dialog.open(DocumentDialogComponent,
   {
   }
   );
   dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
   });
  }

My second component (The Dialog) :

import { MdDialogRef} from "@angular/material";

@Component({
 selector: 'document-dialog',
 template
 })

export class DocumentDialogComponent {
    constructor(
        public dialogRef: MdDialogRef<DocumentDialogComponent>
    ) {}
}

And my module config :

  import { MaterialModule } from "@angular/material";
  import { DocumentsListComponent } from './documents-list.component';
  import { DocumentDialogComponent } from './document-dialog.component';

  imports : [
    MaterialModule.forRoot() 
   ],

  declarations: [
      AppComponent,
      DocumentListComponent,
      DocumentDialogComponent
    ],
    entryComponents: [
      AppComponent,
      DocumentListComponent,
      DocumentDialogComponent
    ],
    providers: [
    ],
    bootstrap: [
      AppComponent
    ]

Why i still have the error :

Error in ./DocumentsListComponent class DocumentsListComponent - inline template:0:167 caused by: No provider for MdDialogRef!

Have you tried importing `MaterialModule` instead of `MaterialModule.forRoot()`? — gsc, Feb 27 '17 at 17:57
Do you import `DocumentDialogComponent` in `DocumentsListComponent`? — gsc, Feb 27 '17 at 18:11
Is the `DocumentDialogComponent` decorated with `@Component(…)`? — gsc, Feb 27 '17 at 18:31
@WilliamLohan. The plunk works fine but not on my side. It can be related to the version of the angular/material ? cause i dont understand why it's not working and i keep have the same error ! i Have the 2.0.0-beta.2 verison — Kivo, Feb 27 '17 at 19:44
@Kivo I don't think so I used @angular/material@2.0.0-beta.2 locally before making the plunker. My steps were `ng new [proj-name]`, `cd [proj-name]`, `npm install @angular/material`, copy/paste your code. — Wilhelmina Lohan, Feb 27 '17 at 21:23
Grrr, so frustrating to waist 2 days to find out what is the problem. When i use html inside my the component template it Works !! — Kivo, Feb 28 '17 at 13:18

score 4 · Answer 1 · edited Mar 02 '17 at 02:06

4

I removed the <DocumentsListComponent></DocumentsListComponent> tag inside my template and now it works.

edited Mar 02 '17 at 02:06

Pang

9,564
146
81
122

answered Feb 28 '17 at 13:41

Kivo

385
8
24

score 2 · Answer 2 · answered Aug 18 '17 at 02:52

We can eliminate this error by setting reference in DocumentDialogComponent using componentInstance property.

Rather than injecting the MdDialogRef in to the component we can set its property by componentInstance of returned reference from open method.

Here is the modified working code:

import { MdDialog} from "@angular/material";

import { DocumentDialogComponent } from './document-dialog.component';    

@Component({
  selector: 'documents-list',
  template
})
export class DocumentsListComponent {

  constructor(
     public dialog: MdDialog) {
  }

  openFormDialog() {

   let dialogRef  = this.dialog.open(DocumentDialogComponent);

    //set the reference here
    dialogRef.componentInstance.dRef = dialogRef;

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

The dialog component is here:

import { MdDialogRef} from "@angular/material";

@Component({
 selector: 'document-dialog',
 template
 })

export class DocumentDialogComponent {
    public dRef:MdDialogRef<DocumentDialogComponent>
    constructor() {}
}

No provider for MdDialogRef

2 Answers2