I have an angular project that, up till now, would build and run successfully. I wanted to add a modal and came across some articles about building a dialog with Angular Materials.
The problem comes when I run ng serve. I get an error:
PS C:\Users\my_directory> ng serve
file:///C:/Users/my_directory/source/repos/Timesheet%20angular/Timesheet%20angular/ClientApp/node_modules/@angular/compiler-cli/bundles/chunk-DJRTTRF3.js:941
throw new Error(`The target entry-point "${invalidTarget.entryPoint.name}" has missing dependencies:
^
Error: The target entry-point "@angular/material" has missing dependencies:
- @angular/cdk/a11y
- @angular/cdk/coercion
- @angular/cdk/bidi
- @angular/cdk/keycodes
- @angular/cdk/overlay
- @angular/cdk/portal
- @angular/cdk/scrolling
I have tried to reinstall angular material and cdk (npm install --save @angular/material @angular/cdk ), I found this solution on Stack Overflow but running the command npm i @angular/cdk -d did not fix the problem.
Here is my package.json
{
"name": "timesheet_angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"prestart": "node aspnetcore-https",
"start": "run-script-os",
"start:windows": "ng serve --port 44440 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
"start:default": "ng serve --port 44440 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",
"build": "ng build",
"build:ssr": "ng run Timesheet_angular:server:dev",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.1.1",
"@angular/cdk": "^14.0.4",
"@angular/common": "~13.1.1",
"@angular/compiler": "~13.1.1",
"@angular/core": "~13.1.1",
"@angular/forms": "~13.1.1",
"@angular/localize": "~13.1.1",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "~13.1.1",
"@angular/platform-browser-dynamic": "~13.1.1",
"@angular/platform-server": "~13.1.1",
"@angular/router": "~13.1.1",
"@ng-bootstrap/ng-bootstrap": "^12.1.2",
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"hammerjs": "^2.0.8",
"jquery": "^3.6.0",
"oidc-client": "^1.11.5",
"popper.js": "^1.16.0",
"run-script-os": "^1.1.6",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.2",
"@angular/cli": "^14.0.3",
"@angular/compiler-cli": "~13.1.1",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.8",
"@types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"typescript": "~4.4.4"
}
}
Here is the HTML and TS files for the modal I'm trying to build
<h2 mat-dialog-title> {{ description }} </h2>
<mat-dialog-content [formGroup]="form">
<mat-form-field>
<input matInput
placeholder="Course Description"
formControlName="description">
</mat-form-field>
....
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button" (click)="close()"> Close</button>
<button class="mat-raised-button mat-primary" (click)="save()"> Save</button>
</mat-dialog-actions>
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig } from "@angular/material";
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
constructor(private dialog: MatDialog) { }
ngOnInit(): void {
}
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
this.dialog.open(DialogComponent, dialogConfig);
}
}
