Function calls are not supported in decorators in animation

Question

ERROR in src/app/components/register/registration-form/registration-form.component.ts(27,18): Error during template compile of 'RegistrationFormComponent'
Function calls are not supported in decorators but 'getanimationRule' was called.

RegistrationFormComponent

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
  styleUrls: ['./registration-form.component.scss'],
  animations:[getanimationRule(registerChildrens)]
})

getanimationRule

export function  getanimationRule(routeCollection: Routes)  {
    const routeArray = routeCollection.map(o => o.data && o.data.animation ? o.data.animation : null)
    .filter((el) => el != null);
    const animationRules = [];
    routeArray.forEach((element, value) => {
        if (element != null) {
            if (value === 0) {
                animationRules.push(transition(element + ' => *', animationDOWN));
            } else if (value === routeArray.length - 1) {
                animationRules.push(transition(element + '=> *', animationUP));
            } else {
                routeArray.forEach((subelement, subvalue) => {
                    if (subelement != null) {
                        if (subvalue < value) {
                            animationRules.push(transition(element + ' => ' + subelement, animationUP));
                        } else if (subvalue > value) {
                            animationRules.push(transition(element + ' => ' + subelement, animationDOWN));
                        }
                    }
                });
            }
        }
    });

    return trigger('routeAnimations',animationRules );
};

Answer 1

Unfortunately, You can't call a function inside component decorator, you can just pass it as a reference like

animations: [getanimationRule] 

follow this link for more info -> Medium