升级Angular Material v15后导入预构建旧版主题失败求助

1. 修正主题导入路径 #

Angular Material v15中，旧版预构建主题的路径与普通主题不同，必须指向legacy-prebuilt-themes目录。正确的导入语句示例：

@import '@angular/material/legacy-prebuilt-themes/indigo-pink.css';

若你的导入路径未包含legacy-prebuilt-themes，会直接触发报错。

2. 确认样式导入位置 #

• 可在全局样式文件（如styles.scss）中添加上述导入语句；
• 也可在angular.json的样式配置数组中声明：

  "styles": [
    "@angular/material/legacy-prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
  ]
  

3. 匹配Legacy组件模块 #

使用旧版组件时，必须导入对应的Legacy模块，而非新版模块。示例：

// 导入旧版按钮模块（可重命名为原模块名方便使用）
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';

@NgModule({
  imports: [
    MatButtonModule,
    // 其他Legacy组件模块...
  ]
})
export class YourFeatureModule { }

额外排查点 #

• 执行ng version确认Angular与Material均为v15版本；
• 执行ng clean清理缓存后重新构建项目；
• 检查是否同时导入了新旧版本主题，确保仅保留legacy-prebuilt-themes下的主题导入。

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