Angular 8 BrowserAnimations ошибка с AOT - PullRequest
Новая
       44

Angular 8 BrowserAnimations ошибка с AOT

1 голос
/ 27 июня 2019

У меня route-animations.ts есть анимация.когда я запускаю код с ng serve, он работает нормально, но я получаю ошибку при работе с ng serve --prod.


export const slider =
  trigger('routeAnimations', [
    transition('* => isLeft', slideTo('left') ),
    transition('* => isRight', slideTo('right') ),
    transition('isRight => *', slideTo('left') ),
    transition('isLeft => *', slideTo('right') )
  ]);

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%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ [direction]: '100%'}))
      ], optional),
      query(':enter', [
        animate('600ms ease', style({ [direction]: '0%'}))
      ])
    ]),
  ];
}

я получаю эту ошибку ERROR in src\app\app.component.ts(14,16): Error during template compile of 'AppComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at src\app\animations\route-animations.ts(41,10).

import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';
import { slider } from './animations/route-animations';;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [slider]
})
export class AppComponent {
  constructor() { }

  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }


}

Ответы [ 2 ]

1 голос
/ 26 июля 2019

Небольшое дополнение к решению @ KLTR.В случае, если вы хотите добавить один и тот же переход на несколько маршрутов, не создавая другую функцию, это может быть достигнуто следующим образом: Ниже приведен код, который можно использовать для применения левого перехода на разных маршрутах: 

 export const slider =
  trigger('routeAnimations', [
  transition('route1 => route2, route3 => route4, route5 => route6', [
  query(':enter, :leave', [
    style({
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%'
  })
  ], { optional: true }),
  query(':enter', [
    style({ left: '-100%'})
  ]),
  group([
    query(':leave', [
    animate('600ms ease', style({ left: '100%'}))
  ], { optional: true }),
  query(':enter', [
    animate('600ms ease', style({ left: '0%'}))
  ])
  ]),
  ]),

Аналогично, разныепереходы могут быть объединены в один экспортированный констант (как упоминалось @KLTR).

1 голос
/ 23 июля 2019

Решение было довольно простым, мы просто должны объединить экспортированный const и функцию в один const.

export const slider =
trigger('routeAnimations', [
  transition('* => isLeft', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ left: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ left: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ left: '0%'}))
      ])
    ]),
  ]),
  transition('* => isRight', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ right: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ right: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ right: '0%'}))
      ])
    ]),
  ]),
  transition('isRight => *', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ left: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ left: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ left: '0%'}))
      ])
    ]),
  ]),
  transition('isLeft => *', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ right: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ right: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ right: '0%'}))
      ])
    ]),
  ])
],
)```
...