How to get Angular Router Animations working with 'ng build --prod'?

Question

I get errors when I want to build my angular app with 'ng build --prod':

ERROR in src/app/route-animations.ts(15,9): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(20,15): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(24,39): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(27,39): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(15,9): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(20,15): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(24,39): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(27,39): Error during template compile of 'slideTo' Expression form not supported.

I don´t really know how to fix this.

I haved added router animations to my app like following:

<div [@routeAnimations]="prepareRoute(outlet)" style="height: 100%">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

import { slider } from './route-animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ 
    slider
  ]
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    ...
  }

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

import { trigger, transition, query, style, animate, group } from '@angular/animations';

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

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

Answer 1

What you want is not entirely possible as animations is not a function more of a decorator pattern syntax, but there might be a way to reuse certain animations, but very limited article on this.

Create a reusable animation with interpolation variables which can be passed from each transition option

import { trigger, transition, query, style, animate, group, animation, useAnimation } from '@angular/animations';

// Reusable animation
export const slideAnimation = animation([
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: 0,
      left: '{{left}}',
      width: '100%'
    })
  ], { optional: true }),
  query(':enter', [
    style({ left: '-{{left}}' })
  ]),
  group([
    query(':leave', [
      animate('600ms ease', style({ left: '{{left}}' }))
    ], { optional: true }),
    query(':enter', [
      animate('600ms ease', style({ left: '{{left}}' }))
    ])
  ]),
]);


export const slider = trigger('routeAnimations', [
  transition('isRight => isLeft', [useAnimation(slideAnimation, { params: { left: '0%', time: '2s' } })]),
  transition('isLeft => isRight', [useAnimation(slideAnimation, { params: { direction: '100%', time: '2s' } })])
]);

The posted solution is not exactly what you currently have and this is pointing to a right direction, I hope you can make it work

Reference: https://angular.io/guide/reusable-animations