如何解决ng serve运行时@angular/material缺失依赖报错问题

报错的核心原因是Angular相关依赖版本严重不匹配，从贴出的package.json可以直接定位问题：

• 项目核心Angular包（@angular/core、@angular/common、@angular/compiler等）统一为13.1.1版本
• 安装的@angular/cdk版本为14.0.4，比核心包高1个大版本
• 安装的@angular/material版本为7.3.7，比核心包低6个大版本
• 开发依赖里的@angular/cli版本为14.0.3，同样和核心包版本不一致

Angular官方生态包（Material、CDK、CLI等）必须和Angular核心包的大版本号严格对齐，跨大版本安装会直接出现依赖入口找不到、API不兼容的问题，看到的一堆@angular/cdk下的模块缺失报错，就是版本错位导致的。

1. 先卸载当前版本错误的包
   终端执行以下命令：

   npm uninstall @angular/material @angular/cdk @angular/cli
   

2. 安装和Angular 13匹配的对应版本包

   # 安装运行时依赖
   npm install --save @angular/material@13 @angular/cdk@13
   # 安装匹配版本的cli
   npm install --save-dev @angular/cli@13
   

3. 清理损坏的依赖缓存
   手动删除项目根目录下的node_modules文件夹和package-lock.json文件，重新执行全量依赖安装：

   npm install
   

4. 修正现有代码里的错误
   当前写的弹窗组件还有几个会导致运行失败的问题，需要同步修改：
   • 不要在弹窗组件自身内部注入MatDialog再open自己，会触发循环依赖。把openDialog触发方法放到普通业务组件里，DialogComponent只保留弹窗内部的表单、关闭/保存逻辑即可。
   • 用到Material组件的模块，必须导入对应的模块：需要在所属NgModule的imports数组里加入MatDialogModule、MatFormFieldModule、MatInputModule，以及响应式表单需要的ReactiveFormsModule，否则模板里的mat-dialog-title、matInput这类指令无法识别。
   • 按钮的写法错误，Material 13版本的按钮不是靠class识别，是用属性指令，把原来的class写法替换成属性写法：

     <!-- 错误写法
     <button class="mat-raised-button" (click)="close()"> Close</button>
     <button class="mat-raised-button mat-primary" (click)="save()"> Save</button>
     -->
     
     <!-- 正确写法 -->
     <button mat-raised-button (click)="close()">关闭</button>
     <button mat-raised-button color="primary" (click)="save()">保存</button>
     

   • DialogComponent需要在所属NgModule的declarations数组中声明，Angular 13版本不需要额外加entryComponents，只要声明即可正常被MatDialog加载。
5. 所有修改完成后，执行ng serve重新启动项目即可。

• 后续安装Angular生态内的包时，一定要指定和核心包一致的大版本，不要直接安装latest版本，否则很容易再次出现版本不兼容问题。
• 项目内同时引入了ng-bootstrap和Angular Material，注意两个UI库的全局样式引入顺序，避免出现样式覆盖冲突。

内容的提问来源于stack exchange，提问作者USMC6072