Angular 14升级至15后模块构建失败求助

问题根源 #

1. Angular Material 15 API变更：mat-core混合宏在Angular Material 15中移除了参数支持，你之前Angular 14里@include mat-core($fontConfig);带参数的写法不再兼容。
2. 依赖冲突：项目同时存在@angular/material@15.1.3和旧版angular-material@1.2.3，两个包会导致样式编译冲突。

解决步骤 #

1. 修改mat-core调用逻辑 #

打开src/material.theme.scss，将带参数的调用：

@include mat-core($fontConfig);

替换为无参数调用，并单独处理字体配置：

方式一：自定义完整排版规则

如果需要精细控制排版，先定义配置再引入：

// 定义自定义排版配置
$typography-config: mat-typography-config(
  $font-family: 'Roboto', sans-serif,
  $headline-1: mat-typography-level(96px, 112px, 300),
  // 按需添加其他排版层级配置
);

// 初始化Material核心样式
@include mat-core;
// 应用自定义排版层级
@include mat-typography-hierarchy($typography-config);
// 覆盖组件默认排版样式
@include mat-typography-overrides($typography-config);

方式二：快速修改字体家族

如果仅需调整字体，直接覆盖全局变量即可：

$mat-body-font-family: 'Roboto', sans-serif;
// 按需添加其他字体变量覆盖，如$mat-headline-font-family
@include mat-core;

2. 移除冲突依赖 #

卸载旧版angular-material包：

npm uninstall angular-material
# 若使用yarn则执行
yarn remove angular-material

检查package.json，确保angular-material已从依赖列表中删除。

3. 重新安装依赖并启动项目 #

npm install
ng serve

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