Angular 17使用Angular Material旧版样式报错求助

问题背景 #

• 在Angular 17项目中使用旧版Angular Material主题代码时，出现@angular/material/core/theming文件找不到的编译错误
• 尝试降级Material到11版本后，项目中所有Material组件和模块均报错，需在保留Angular 17版本的前提下解决问题

错误信息 #

./src/styles/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
4 │ @import '@angular/material/core/theming';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\theme\material\_theming.scss 4:9  @import
  src\styles\theme\material\index.scss 2:9     @import
  src\styles\styles.scss 6:9                   root stylesheet

./src/styles/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
4 │ @import '@angular/material/core/theming';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\theme\material\_theming.scss 4:9  @import
  src\styles\theme\material\index.scss 2:9     @import
  src\styles\styles.scss 6:9                   root stylesheet

修复步骤 #

Angular Material 15+重构了主题导入路径，但保留了旧版legacy主题API的兼容性，无需降级Angular版本，仅需修改主题代码适配新版本结构：

1. 更新主题导入路径 #

旧版的@angular/material/core/theming导入路径在Angular Material 17中已被移除，替换为统一的主题导入：

// 替换旧的两行导入
@import '@angular/material' as mat;
@import '@angular/material/core/theming';

// 改为单一行导入（包含所有主题工具及legacy API）
@import '@angular/material/theming' as mat;

2. 适配Legacy主题代码 #

Angular Material 17仍支持旧版legacy主题API，修改后的完整主题代码如下：

// Custom Theming for Angular Material
@import '@angular/material/theming' as mat;

@import 'form-field';

// --------------------------------------------------------------------------------------------------------------------
// fonts
// --------------------------------------------------------------------------------------------------------------------

$custom-typography: mat.define-legacy-typography-config(
    $font-family: $bodyFont,
    $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
    $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
    $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
    $display-1: mat.define-typography-level(34px, 40px, 400),
    $headline: mat.define-typography-level(22px, 30px, 400, $headingFont),
    $title: mat.define-typography-level(18px, 30px, 500, $headingFont),
    $subheading-2: mat.define-typography-level(inherit, 28px, 400),
    $subheading-1: mat.define-typography-level(15px, 24px, 400),
    $body-2: mat.define-typography-level(13px, 24px, 500),
    $body-1: mat.define-typography-level(13px, 20px, 400),
    $caption: mat.define-typography-level(13px, 20px, 400),
    $button: mat.define-typography-level(13px, 14px, 500),
    $input: mat.define-typography-level(inherit, 1.125, 400)
);

// Include the common styles for Angular Material
@include mat.all-legacy-component-typographies($custom-typography);
@include mat.legacy-core();

3. 修复第三方依赖兼容性 #

确保项目中Material相关第三方依赖支持Angular 17：

• 将ngx-mat-select-search升级到^17.x版本
• 替换mat-timepicker为官方@angular/material/timepicker组件（原组件已停止维护）
• 执行npm update更新所有Material相关依赖到兼容版本

4. 验证修复 #

重新构建项目确认错误消除：

ng build

若仍有组件导入错误，检查组件导入路径：旧版@angular/material/xxx路径仍可用，部分组件可能需调整为@angular/material/xxx/xxx形式（如MatDialog从@angular/material/dialog导入）

关键说明 #

• Angular Material 17完全兼容旧版legacy主题系统，无需降级Angular或Material版本
• 核心变化仅为主题文件导入路径的调整，旧版主题逻辑无需大幅修改
• 所有legacy API（如mat.define-legacy-typography-config、mat.legacy-core）在Angular 17中仍保留

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