Animating backgroundColor from an empty state to a state with a color value throws an error

[madakk]

The error thrown is:

Error: Expected 1 or 4 constructor parameters.

This is coming from the Color constructor. Looks like the property's valueConverter is called from parseKeyframeDeclarations with a value which is already a Color instance, which is then passed into the Color constructor, which in turn doesn't expect it and throws the error. In fact, this might be a core NativeScript issue, because valueConverter expects a string.

This can be easily reproduced by running the following example, which throws as soon as it initializes as it transitions into the "inactive" state:

https://github.com/NativeScript/nativescript-angular/blob/eb3fd81c7bb4cdb9938feea13cd9e34b868e451a/ng-sample/app/examples/animation/animation-states-test.ts

Or the following simplified testcase:

import { Component } from "@angular/core";
import { trigger, style, animate, state, transition } from "@angular/animations";

@Component({
    selector: "animation-states",
    template: `
        <StackLayout>
            <Button text="Touch me!" [@state]="isOn ? 'active' : 'inactive'" (tap)="onTap()"></Button>
        </StackLayout>`,
    animations: [
        trigger("state", [
            state("active", style({
                backgroundColor: "green"
            })),
            transition("* => active", [ animate("600ms ease-out") ])
        ])
    ]
})
export class AppComponent {
    isOn = false;

    onTap() {
        this.isOn = !this.isOn;
    }
}

[NickIliev]

@madakk are you still reproducing this while using the latest nativescript-angular and related Angular dependencies (including @angular/animations).

Closing the issue due to inactivity but please do let me know if you are still experiencing this issue,