ng build - не экспортируемая функция prod

Question

Я начинающий пользователь 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)
    ]),
  ];
}

FadeIn Animation

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: маршрутные анимации: Ошибка:

Answer 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),
  ]);

После этого все отлично работает.