Angular 6.0.3启用Ivy时遇TemplateDefinitionBuilder不支持动画错误求解决方案

首先得说，Angular 6的Ivy编译器当时还处于非常早期的实验阶段，对动画的支持确实没做完善——哪怕你手动移除了代码里的动画引用，项目配置或依赖里的残留也可能导致报错。试试下面这些分步解决办法：

• 彻底清理动画相关的配置与依赖

  1. 打开app.module.ts，确认有没有导入BrowserAnimationsModule或者NoopAnimationsModule，如果有，完全移除这些导入语句以及它们在imports数组里的配置项。
  2. 遍历项目里所有组件的@Component装饰器，删掉所有带有animations属性的配置。
  3. 卸载动画依赖包：执行命令 npm uninstall @angular/animations（用Yarn的话就换成yarn remove @angular/animations）。

• 检查并修正Ivy的启用配置
  Angular 6里启用Ivy需要在tsconfig.json里添加专属配置，确保格式正确且无冲突：
  在文件的compilerOptions同级位置添加：

  "angularCompilerOptions": {
    "enableIvy": true
  }
  

  另外检查angular.json的build配置段，有没有和动画相关的builder设置，Angular 6的builder本身对Ivy支持有限，尽量保持配置简洁。

• 清理缓存与残留依赖
  如果上面的步骤没解决问题，彻底清理项目缓存和依赖：

  • 执行rm -rf node_modules package-lock.json（Windows系统换成rmdir /s /q node_modules && del package-lock.json）
  • 重新安装依赖：npm install

• （可选）升级Angular版本
  因为Angular 6的Ivy只是预览功能，很多特性都未完善。如果项目允许，建议升级到Angular 8及以上版本（Ivy在Angular 8进入稳定实验阶段，Angular 9成为默认编译器），能从根本上解决这类兼容性问题。

补充：Angular 6的Ivy本身就不支持动画特性，所以最核心的解决思路要么是彻底清除所有动画相关的代码、配置与依赖，要么升级到对Ivy支持更完善的Angular版本。

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