如何解决 @angular/material 缺少的依赖项

Question

我有一个 Angular 项目，到目前为止，它可以成功构建和运行。我想添加一个模态，偶然发现了一些关于building a dialog with Angular Materials的文章。

当我运行 ng serve 时问题就来了。我收到一个错误：

    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

我尝试重新安装 angular material 和 cdk (npm install --save @angular/material @angular/cdk)，我找到了 this solution on Stack Overflow，但运行命令 npm i @angular/cdk -d 并没有解决问题。

这是我的 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"
      }
    }

这是我正在尝试构建的模式的 HTML 和 TS 文件

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

Answer 1

当一切都失败时...重新启动！我卸载了所有东西并重新安装，现在它可以工作了。哼！