Angular 5升级至Angular 6：@angular/core中AnimationEntryMetadata报错问题

嘿，刚好我最近处理过好几个Angular 5升6的项目，你遇到的这个AnimationEntryMetadata找不到的问题其实是Angular团队在6版本里的一个刻意调整，不用慌，几步就能搞定：

问题根源 #

Angular 6把所有动画相关的API从@angular/core模块里拆分到了独立的@angular/animations包中，所以原来从@angular/core导入AnimationEntryMetadata的写法自然就失效了。

具体修复步骤 #

• 首先确认@angular/animations包已安装（升级过程通常会自动安装，但保险起见可以执行这个命令）：

  npm install @angular/animations@6.0.0-rc.5
  

• 然后修改你的导入语句，把AnimationEntryMetadata的来源从@angular/core切换到@angular/animations：
  原来的代码：

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

  改成：

  import { AnimationEntryMetadata } from '@angular/animations';
  

• 额外提醒：如果你的动画代码里还用到了trigger、state、transition、animate这些常用动画函数，也要同步把它们的导入路径从@angular/core移到@angular/animations里，比如：

  import { trigger, state, transition, style, animate, AnimationEntryMetadata } from '@angular/animations';
  

小补充 #

这个变动其实是Angular 6模块化拆分的一部分，目的是让核心包更轻量化，只保留最基础的功能。你已经搞定了RxJS的路径修复，这个动画的调整也是升级流程里的常规操作，改完之后应该就能正常运行了～

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