JHipster 7.6.0单体应用集成Angular Material报错如何解决

JHipster 7.6.0 默认绑定 Angular 13.x 版本，直接执行ng add @angular/material会默认拉取最新版（17+）Angular Material，主版本不兼容是触发schematics执行失败、安装中断的核心原因，按以下步骤操作即可完成集成：

方式一：版本匹配后走自动安装流程 #

• 先停掉本地正在运行的前端开发服务，进入项目下的src/main/webapp目录（JHipster前端代码统一存放在该路径，禁止在项目根目录直接执行Angular CLI命令）
• 先安装和现有Angular大版本完全匹配的Material相关依赖，执行命令：

npm install @angular/material@13 @angular/cdk@13 @angular/animations@13 --save-exact

• 依赖安装完成后，再执行初始化命令，跳过自动版本检测步骤：

ng add @angular/material@13 --skip-confirmation

执行过程中按提示选择主题、是否开启全局动画、是否引入手势支持即可完成安装。

方式二：自动脚本报错时走手动配置 #

如果上述命令仍报schematics相关错误，可以跳过自动脚本手动完成配置：

1. 先执行上文的依赖安装命令，确认@angular/material@13、@angular/cdk@13、@angular/animations@13三个依赖已经成功写入package.json
2. 在app.module.ts中导入动画模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    // 保留原有已导入的模块
    BrowserAnimationsModule
  ]
})
export class AppModule { }

3. 打开全局样式文件src/content/scss/global.scss，引入Material预构建主题，可根据需求替换为其他官方预置主题：

// 可选主题：deeppurple-amber.css、indigo-pink.css、pink-bluegrey.css、purple-green.css
@import '@angular/material/prebuilt-themes/indigo-pink.css';

// 加入Material官方推荐的全局基础样式
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

4. 打开src/index.html，在head标签内引入Roboto字体和Material图标字体：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

配置完成后启动项目，在任意业务模块导入需要的Material组件模块（比如MatButtonModule），添加对应组件标签验证样式、交互正常即集成成功。JHipster自带的构建配置已经兼容Angular Material，不需要额外调整webpack或loader规则。

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