ng build --prod 非导出函数答案

【问题标题】：ng build --prod non-exported functionng build --prod 非导出函数
【发布时间】：2019-06-26 05:48:24
【问题描述】：

我是 Angular 的初学者。编译器说我在负责组件之间动画的文件中有一个方法错误。我不太清楚问题出在哪里。

在寻找问题的解决方案时，我发现有必要为动画的每个状态添加一个“可选”。我添加了，但没有帮助...

动画路线

export const animateRoutes=
  trigger('routeAnimations', [
    transition('webDesign => graphicDesign', slideTo('left') ),
    transition('graphicDesign => webDesign', slideTo('right') ),

    transition('webDesign => webProject', slideTo('right') ),
    transition('webProject => webDesign', slideTo('left') ),

    transition('graphicDesign => graphicProject', slideTo('right') ),
    transition('graphicProject => graphicDesign', slideTo('left') ),

    transition('webProject => graphicDesign', slideTo('left') ),
    transition('graphicProject => webDesign', slideTo('left') ),

    transition('* => *', fadeIn() )
  ]);

幻灯片动画

function slideTo(direction) {
  const optional = { optional: true };
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%',
      })
    ], optional),
    query(':enter', [
      style({ [direction]: '-100%'})
    ],optional),
    group([
      query(':leave', [
        animate('800ms ease-in-out', style({ [direction]: '100%'}))
      ], optional),
      query(':enter', [
        animate('800ms ease-in-out', style({ [direction]: '0%'}))
      ],optional)
    ]),
  ];
}

淡入动画

function fadeIn() {
    const optional = { optional: true };
    return [
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ], optional),
      query(':enter', [
        style({ opacity: 0 })
      ],optional),
      group([
        query(':leave', [
          animate('600ms linear', style({ opacity: 0 }))
        ], optional),
        query(':enter', [
          animate('600ms linear', style({ opacity: 1 }))
        ],optional)
      ]),
    ];
  }

app.component.ts：路线动画：错误：

【问题讨论】：

错误是什么？！
@Mic 抱歉，谢谢...我刚刚更新了问题并添加了错误图片
错误表明route-animations.ts 文件中存在错误。能否请您在此处分享该文件中的代码，以便其他人可以查看它以确定那里的问题
@Sanira 感谢您的评论。我添加了图片
您能否在stackblitz 或其他地方重现该问题并在此处添加链接，以便轻松找到解决方案。因为我们可以观察整个代码库，找出位置和原因，这就是为什么这段代码没有编译

标签： angular typescript angular-cli angular7

【解决方案1】：

我找到的解决方案不是将动画设置在函数中，而是设置为变量。我在这里找到了这个解决方案： https://pastebin.com/H1CKMvw5

const optional = { optional: true };
let toTheRight = [
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: '0',
      right: 0,
      width: '100%',
    })
  ], optional),
  query(':enter', [
    style({ right: '-100%',  })
  ]),
  group([
    query(':leave', [
      animate('300ms ease', style({ right: '100%', }))
    ], optional),
    query(':enter', [
      animate('300ms ease', style({ right: '0%'}))
    ])
  ]),
];
let toTheLeft = [
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: '0',
      left: 0,
      width: '100%',
    })
  ], optional),
  query(':enter', [
    style({ right: '-100%',  })
  ]),
  group([
    query(':leave', [
      animate('300ms ease', style({ left: '100%', }))
    ], optional),
    query(':enter', [
      animate('300ms ease', style({ left: '0%'}))
    ])
  ]),
]


export const slider =
  trigger('routeAnimations', [
    transition('* => isLeft', toTheLeft),
    transition('* => isRight', toTheRight),
    transition('isRight => *', toTheLeft),
    transition('isLeft => *', toTheRight),
  ]);

之后一切正常。

【讨论】：