Angular 15执行ng serve时出现ANIMATION_MODULE_TYPE导出错误

执行ng serve时，项目中大量文件报以下编译错误：

./node_modules/@angular/material/fesm2020/button.mjs:239:156-177 - Error: export 'ANIMATION_MODULE_TYPE' (imported as 'ANIMATION_MODULE_TYPE') was not found in '@angular/platform-browser/animations' (possible exports: BrowserAnimationsModule, NoopAnimationsModule, provideAnimations, provideNoopAnimations, ɵAnimationRenderer, ɵAnimationRendererFactory, ɵBrowserAnimationBuilder, ɵBrowserAnimationFactory, ɵInjectableAnimationEngine)

项目依赖版本均为Angular 15.2.4，已尝试添加NoopAnimationsModule、清理缓存、重装依赖等方法，问题未解决。

解决方案 #

1. 修正ANIMATION_MODULE_TYPE的导入路径 #

全局搜索项目中所有导入ANIMATION_MODULE_TYPE的代码，确保导入来源是@angular/core而非@angular/platform-browser/animations。正确导入示例：

import { ANIMATION_MODULE_TYPE } from '@angular/core';

2. 彻底清理依赖与构建缓存 #

执行以下命令完成深度清理，避免缓存导致的版本不匹配：

rm -rf node_modules package-lock.json
npm cache clean --force
ng cache clean
npm install

3. 升级Angular Material/CDK到同系列最新小版本 #

虽然当前依赖版本一致，但15.2.4可能存在模块导出的小bug，升级到同分支最新版本（如15.2.5）修复问题：

npm install @angular/material@15.2.5 @angular/cdk@15.2.5

4. 确保动画模块的正确导入方式 #

在AppModule中使用NgModule模式的动画模块，避免混用独立组件API：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; // 或BrowserAnimationsModule
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, NoopAnimationsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：不要在NgModule配置中同时使用provideAnimations()或provideNoopAnimations()（这是Angular 14+独立组件的API）。

5. 验证tsconfig编译配置 #

确保tsconfig.json的编译目标与Angular 15的ES模块格式匹配，建议配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    // 其他原有配置...
  }
}

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