2017-11-02 7 views
1

私はこれを多くの方法で試してみたところ、ドキュメントを作成してそれを起動し、少なくともAngular Materialを実行しようとしました。角4 MatDialogRefのプロバイダはありません! (ウェブパック)

私は私のコンソールで次のエラーを取得しています:

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の前に現れました。しかし、私は現在オープンチケットを見つけることができません。以前誰かがこの問題を遭遇しましたか?

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

In私は次のインポートを追加してい@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!

----------------------------更新2 --------------- BASICAであるあなたが@angular2-material/coreをアンインストールする必要が--------

component

enter image description here

enter image description here

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

+1

@NgModuleでインポートしましたか? –

+0

@H.Hakvoortはアップデート1を参照してください。 – Drew1208

答えて

0

旧バージョンの角材を使用しています。

+0

@ Drew1208と同様に、コンソールに 'npm uninstall @ angular2-material/core'と入力する必要があります。 – Edric

+1

私は "@ angle/material": "2.0.0-beta.12"、 " – Drew1208

関連する問題