각도 4 MatDialogRef! (webpack)

나는 여러 가지 방법을 시도해 보았고 문서를 작성하여 적어도 Angular Material을 실행하려고 시도했다.각도 4 MatDialogRef! (webpack)

내 콘솔에서 다음과 같은 오류가 점점 오전 :

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for MatDialogRef!

코드 : HTML에서

import {Component, Inject} from '@angular/core'; 
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material'; 

@Component({ 
    selector: 'replace-office', 
    templateUrl: 'replace-office.component.html', 
    styleUrls: ['replace-office.component.css'] 
}) 
export class ModalMessageReplaceComponent { 

    someValue: boolean = false; 

    constructor(public dialogRef: MatDialogRef<ModalMessageReplaceComponent>, 
       @Inject(MAT_DIALOG_DATA) public data: any) { } 

    onNoClick(): void { 
     this.dialogRef.close(this.someValue); 
    } 

}

<li> 
    <button mat-raised-button (click)="onNoClick()">Pick one</button> 
</li>

Dependencies in the package.json file

"dependencies": { 
    "@angular-redux/store": "6.5.7", 
    "@angular/animations": "4.4.6", 
    "@angular/cdk": "^2.0.0-beta.12", 
    "@angular/common": "4.4.6", 
    "@angular/compiler": "4.4.6", 
    "@angular/core": "4.4.6", 
    "@angular/forms": "4.4.6", 
    "@angular/http": "4.4.6", 
    "@angular/material": "^2.0.0-beta.12", 
    "@angular/platform-browser": "4.4.6", 
    "@angular/platform-browser-dynamic": "4.4.6", 
    "@angular/router": "4.4.6", 
    "@angular2-material/core": "^2.0.0-alpha.8-3", 
    "X-editable": "github:vitalets/x-editable", 
    "angular-moment": "^1.1.0", 
    "angular-tree-component": "^5.1.2", 
    "bootstrap": "3.3.7", 
    "bootstrap-colorpicker": "2.5.2", 
    "bootstrap-duallistbox": "github:istvan-ujjmeszaros/bootstrap-duallistbox", 
    "bootstrap-markdown": "2.10.0", 
    "bootstrap-progressbar": "0.9.0", 
    "bootstrap-slider": "9.9.0", 
    "bootstrap-tagsinput": "0.7.1", 
    "bootstrap-timepicker": "0.5.2", 
    "chart.js": "2.7.1", 
    "classlist.js": "^1.1.20150312", 
    "clockpicker": "0.0.7", 
    "clone": "2.1.1", 
    "core-js": "2.5.1", 
    "debounce": "1.1.0", 
    "dropzone": "5.2.0", 
    "dygraphs": "2.0.0", 
    "fuelux": "3.16.2", 
    "hammerjs": "^2.0.8", 
    "he": "1.1.1", 
    "highcharts": "6.0.2", 
    "intl": "^1.2.5", 
    "ion-rangeslider": "2.2.0", 
    "jquery": "3.2.1", 
    "jquery-color": "1.0.0", 
    "jquery-jcrop": "0.9.13", 
    "jquery-knob": "1.2.11", 
    "jquery-ui-npm": "1.12.0", 
    "jquery-validation": "1.17.0", 
    "jquery.maskedinput": "1.4.1", 
    "markdown": "0.5.0", 
    "mdn-polyfills": "^5.0.0", 
    "moment": "^2.19.1", 
    "morris.js": "0.5.0", 
    "ngx-bootstrap": "^1.6.6", 
    "ngx-popover": "0.0.16", 
    "nouislider": "10.1.0", 
    "npm": "^5.3.0", 
    "raphael": "2.2.7", 
    "redux": "3.7.2", 
    "rxjs": "5.5.2", 
    "scriptjs": "2.5.8", 
    "select2": "4.0.6-rc.0", 
    "smartadmin-plugins": "1.0.20", 
    "to-markdown": "3.1.0", 
    "ts-helpers": "1.1.2", 
    "web-animations-js": "^2.2.5", 
    "zone.js": "0.8.18" 
    },

이 문제는 2 번 이전에 나왔습니다. 그러나 현재 티켓을 찾을 수없는 것 같습니다. 이전에이 문제를 접한 사람이 있습니까?

-------------------

Error: Unexpected value 'MatDialog' imported by the module 'ManageRolesModule'. Please add a @NgModule annotation. 
Error: Unexpected value 'MatDialog' imported by the module 'ManageRolesModule'. Please add a @NgModule annotation.

은 그 때 나는 새로운 방법을 시도하고 NgModule 중 수입했다 :

을 그렇게함으로써

import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material'; 


@NgModule({ 
    imports: [ 
     CommonModule, 
     SmartadminModule, 
     ManageRolesRoutingModule, 
     Tree, 
     BsDropdownModule, 
     MatDialog 

    ],

새로운 오류가 발생합니다 : 내가 가지고있는 @NgModule 나는 다음 가져 오기를 추가

export class ModalMessageReplaceComponent { 

    someValue: boolean = false; 

    constructor(public dialogRef: MatDialogRef<ModalMessageReplaceComponent>) { } 

    onNoClick(): void { 
     this.dialogRef.close(this.someValue); 
    } 

}

이 결과는 원래 오류로 돌아갑니다. Error: No provider for MatDialogRef!

---------------------------- 업데이트 2 --------------- --------