Angular 4没有MatDialogRef的提供商！用于Angular材料（webpack）

Question

我尝试了很多方法，并尝试按照文档来完成并至少运行Angular Material。

我在控制台中收到以下错误：

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

代码：

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);
    }

}

在HTML中：

<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之前。但我目前似乎无法找到打开的门票。有没有人以前遇到过这个问题？

--------------------更新一个-------------------

在@NgModule我添加了以下导入内容：

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


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

    ],

这样做会导致新错误：

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中导入：

export class ModalMessageReplaceComponent {

    someValue: boolean = false;

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

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

}

此结果返回原始错误。 Error: No provider for MatDialogRef!

----------------------------更新二----------------- ------

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

Answer 1

您需要卸载@angular2-material/core，这基本上是Angular Material的旧版本。

编辑：您必须将您的组件添加到entryComponents：

@NgModule({
    entryComponents: [
        ModelMessageReplaceComponent
    ]
})