Angular Material 14 展开面板异常：始终处于展开状态

问题描述 #

使用Angular 14版本的Angular Material展开面板（mat-expansion-panel）时，面板始终处于展开状态，点击头部无法收起内容。其他Material组件可正常工作，代码直接采用v14官方示例。

代码示例 #

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel >
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am 
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

angular.json styles配置 #

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],

已尝试的解决方法 #

• 移除Bootstrap的CSS和JS文件
• 导入BrowserModule与BrowserAnimationsModule
• 更换Material文档版本
• 在styles.css中导入主题CSS

控制台报错信息（翻译后） #

core.mjs:6387 错误 Error: NG03402: 无法处理动画，原因是以下触发器转换失败
 NG03505: @expansionHeight 转换失败，原因是：
 NG03003: 请为动画参数 collapsedHeight 提供值
NG03505: @expansionHeight 转换失败，原因是：
 NG03003: 请为动画参数 collapsedHeight 提供值
    at triggerTransitionsFailed (browser.mjs:132:12)
    at TransitionAnimationEngine.reportError (browser.mjs:3509:15)
    at TransitionAnimationEngine._flushAnimations (browser.mjs:3674:18)
    at TransitionAnimationEngine.flush (browser.mjs:3473:32)
    at InjectableAnimationEngine.flush (browser.mjs:4320:32)
    at animations.mjs:213:29
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Zone.run (zone.js:134:43)
    at NgZone.runOutsideAngular (core.mjs:26393:28)
    at AnimationRendererFactory.end (animations.mjs:211:24)

解决步骤 #

1. 清理重复的Bootstrap样式导入
   你的styles配置中重复导入了Bootstrap的CSS文件（bootstrap.min.css和bootstrap.css），这会导致样式冲突。保留一个即可，建议保留压缩版：

   "styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
     "src/styles.css"
   ],
   

2. 确保Material主题样式加载顺序正确
   将Angular Material主题CSS放在Bootstrap之后、自定义样式之前，避免Bootstrap样式覆盖Material的核心动画与布局样式。

3. 验证Angular与Material版本一致性
   确保@angular/material版本与Angular核心版本（14.x.x）完全匹配，执行以下命令检查版本：

   npm list @angular/core @angular/material
   

   若版本不匹配，重新安装对应版本的Material：

   npm install @angular/material@14.2.7 --save
   

4. 确认动画模块正确配置
   在根模块（如AppModule）中确保仅导入BrowserAnimationsModule，不要同时导入NoopAnimationsModule：

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   @NgModule({
     imports: [
       // ...其他导入
       BrowserAnimationsModule
     ]
   })
   export class AppModule { }
   

5. 清理依赖缓存并重新安装
   删除node_modules和package-lock.json，重新安装依赖以修复可能的版本冲突：

   rm -rf node_modules package-lock.json
   npm install
   

6. 检查自定义样式是否冲突
   排查styles.css或其他组件样式中是否有覆盖mat-expansion-panel的display、height等属性，比如避免以下类似样式：

   .mat-expansion-panel-content {
     display: block !important;
   }
   

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