Angular 2 --aot导致AnimationEntryMetadata故障 [英] Angular 2 --aot causes AnimationEntryMetadata failure

问题描述

我的代码可以与 ng build 和 ng build --prod 正常工作，当我在命令中添加--aot时，它将失败，并出现以下错误:

未捕获的错误:模块构建失败:错误:C:/Users/dremache/Code/control-f2/client/src/app/transitions.ts(11,14):导出的变量'pageTransitions'具有或从外部模块"C:/Users/dremache/Code/control-f2/client/node_modules/@ angular/core/src/animation/metadata"使用名称"AnimationEntryMetadata"，但无法命名.

这是 transitions.ts :

  import {触发器，状态，风格，过渡，动画，关键帧}来自"@ angular/core"；导出const pageTransitions =触发器('slideInOut'，[state('in'，style({transform:'translateX(0)'})))，transition('void => *'，[样式({transform:'translateX(-60px)'，opacity:'0'})，动画('300ms缓解')])，transition('* => void'，[animate('300ms easy-out'，style({transform:'translateX(-60px)'}))])]); 

这是导入它的组件:

 //其他进口从'./transitions'导入{pageTransitions};@零件({//其他属性动画:[pageTransitions，触发器('items'，[//在此声明状态和转换.]}) 

有什么想法吗?我这样做是为了避免重新定义相同的动画.这些动画被应用到从 void =>开始的组件上.* 创建页面过渡动画.

解决方案

已修复！

在我的transitions.ts文件中，我需要更改:

  export const pageTransitions = 

收件人:

  export const pageTransitions:AnimationEntryMetadata = 

(以及从 @ angular/core 导入 AnimationEntryMetadata )

My code works fine with ng build and ng build --prod howerver, when I add --aot to the command, it fails with the following error:

Uncaught Error: Module build failed: Error: C:/Users/dremache/Code/control-f2/client/src/app/transitions.ts (11,14): Exported variable 'pageTransitions' has or is using name 'AnimationEntryMetadata' from external module "C:/Users/dremache/Code/control-f2/client/node_modules/@angular/core/src/animation/metadata" but cannot be named.)

This is transitions.ts:

import { trigger,
  state,
  style,
  transition,
  animate,
  keyframes } from '@angular/core';


export const pageTransitions = 

  trigger('slideInOut', [

    state('in', style({transform: 'translateX(0)'})),

    transition('void => *', [
      style({transform: 'translateX(-60px)',opacity: '0'}),
      animate('300ms ease-out')
    ]),
    transition('* => void', [
      animate('300ms ease-out', style({transform: 'translateX(-60px)'}))
    ])
  ]);

This is the component that's importing it:

//other imports
import { pageTransitions } from './transitions';

@Component({
  //other properties
  animations: [ pageTransitions, 

      trigger('items', [
         // states and transitions here.. removing for cleanliness
      ]
  })

Any ideas? I'm doing this to avoid re-defining the same animations. These animations are being applied on components that are going from void => * to create page transition animations.

解决方案

Fixed it!

In my transitions.ts file I needed to change:

export const pageTransitions = 

to:

export const pageTransitions: AnimationEntryMetadata = 

(as well import AnimationEntryMetadata from @angular/core)

这篇关于Angular 2 --aot导致AnimationEntryMetadata故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！