I have tried this many way and tried to do it like the documentation to get it up and running at least Angular Material.
I am getting the following error in my console:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for MatDialogRef!
Code:
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);
}
}
In the 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"
},
This issue has appeared before in angular 2. However I cannot seem to find open tickets currently. Has anyone came across this issue before?
--------------------Update one-------------------
In the @NgModule I have I added the following import:
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
@NgModule({
imports: [
CommonModule,
SmartadminModule,
ManageRolesRoutingModule,
Tree,
BsDropdownModule,
MatDialog
],
In doing so causes a new error:
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.
Then I tried a new way and took the import out of the NgModule:
export class ModalMessageReplaceComponent {
someValue: boolean = false;
constructor(public dialogRef: MatDialogRef<ModalMessageReplaceComponent>) { }
onNoClick(): void {
this.dialogRef.close(this.someValue);
}
}
This result back to the original error. Error: No provider for MatDialogRef!
----------------------------Update two-----------------------
Uncaught (in promise): Error: No provider for MatDialogRef!
