My angular material dialog box was working just fine before I updated the packages with latest version 10. I don't know what I'm missing in my dependencies or code.
It might be related with new Angular compiler Ivy or Angular material library.
Here is my package.json file -
"dependencies": {
"@angular/animations": "^10.0.1",
"@angular/cdk": "^10.0.0",
"@angular/common": "^10.0.1",
"@angular/compiler": "^10.0.1",
"@angular/core": "^10.0.1",
"@angular/forms": "^10.0.1",
"@angular/material": "^10.0.0",
"@angular/platform-browser": "^10.0.1",
"@angular/platform-browser-dynamic": "^10.0.1",
"@angular/router": "^10.0.1",
"@popperjs/core": "^2.4.2",
"animate.css": "^4.1.0",
"bootstrap": "^4.5.0",
"crypto-js": "^4.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.5.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1000.0",
"@angular/cli": "^10.0.0",
"@angular/compiler-cli": "^10.0.1",
"@angular/language-service": "~9.0.7",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^7.0.0",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "^3.9.5"
}
Here is my app.module.ts file showing entryComponents as it is needed for material dialog box. So you see I'm not making the most common mistake of not adding in entryComponents.
entryComponents: [
VoucherDialogBoxComponent,
DateNoticeDialogBoxComponent,
ReportDialogBoxComponent,
EditTransactionDialogBoxComponent,
DeleteConfirmDialogBoxComponent,
BeforeBaseYearWarningDialogBoxComponent
],
HTML is showing fine near the bottom left corner and not coming in the middle of the screen as a popup.