Error: Can't resolve all parameters for MatDialog: (?, ?, ?, ?, ?, ?, ?)

449 Views Asked by At

Im trying to replicate this Angular Material component example in my project: https://material.angular.io/components/dialog/examples Instead I get this error: [Error: Can't resolve all parameters for MatDialog: (?, ?, ?, ?, ?, ?, ?)][1]

I've pasted my code below, it is extremely simple: TS file:

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

    @Component({
      selector: 'lib-custom-dialog',
      templateUrl: './custom-dialog.component.html',
      styleUrls: ['./custom-dialog.component.scss']
    })
    export class CustomDialogComponent implements OnInit {
      ngOnInit() {}

      constructor(public dialog: MatDialog) {}
      openDialog() {
        console.log("test");
        const dialogRef = this.dialog.open(CustomDialogWindow);

        dialogRef.afterClosed().subscribe(result => {
          console.log('Dialog result: ${result}');
        });
      }
    }

    @Component({
      selector: 'custom-dialog-window',
      templateUrl: 'custom-dialog-window.html'
    })
    export class CustomDialogWindow {}

And module.ts file:

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { CustomDialogComponent } from './custom-dialog/custom-dialog.component';
    import { CustomDialogWindow } from './custom-dialog/custom-dialog.component';
    import { MatDialogModule } from '@angular/material/dialog';
    import { MatDialog } from '@angular/material/dialog';
    import { MatDialogRef } from '@angular/material/dialog';


    @NgModule({
      declarations: [
        CustomDialogComponent,
        CustomDialogWindow,
      ],
      imports: [
        CommonModule,
      ],
      exports: [
        CustomDialogComponent,
        CustomDialogWindow,
        MatDialogModule,
        MatDialog,
        MatDialogRef,
      ],
      providers:[
        MatDialogModule,
        MatDialog,
      ]
    })
    export class CustomDialogModule { }

I am using angular 12.0.3 If anyone has any ideas they would be greatly appreciated. This component is implemented in a storybook project. [1]: https://i.stack.imgur.com/Lg5F1.png

0

There are 0 best solutions below