Compilation errors on fresh rive and angular install #61
Description
Currently running into compilation with a fresh install of angular and rive
Error when running `ng serve --o`
Error: node_modules/ng-rive/lib/animation.d.ts:50:116 - error TS2344: Type '{ name: { alias: "name"; required: false; }; index: { alias: "index"; required: false; }; mix: { alias: "mix"; required: false; }; speed: { alias: "speed"; required: false; }; play: { alias: "play"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"name"' is incompatible with index signature.
Type '{ alias: "name"; required: false; }' is not assignable to type 'string'.
50 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveLinearAnimation, "riv-animation, [rivAnimation]", ["rivAnimation"], { "name": { "alias": "name"; "required": false; }; "index": { "alias": "index"; "required": false; }; "mix": { "alias": "mix"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "play": { "alias": "play"; "required": false; }; }, { "load": "load"; }, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/canvas.d.ts:55:86 - error TS2344: Type '{ riv: { alias: "riv"; required: false; }; name: { alias: "artboard"; required: false; }; viewbox: { alias: "viewbox"; required: false; }; lazy: { alias: "lazy"; required: false; }; fit: { alias: "fit"; required: false; }; alignment: { ...; }; width: { ...; }; height: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"riv"' is incompatible with index signature.
Type '{ alias: "riv"; required: false; }' is not assignable to type 'string'.
55 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveCanvas, "canvas[riv]", ["rivCanvas"], { "riv": { "alias": "riv"; "required": false; }; "name": { "alias": "artboard"; "required": false; }; "viewbox": { "alias": "viewbox"; "required": false; }; "lazy": { "alias": "lazy"; "required": false; }; "fit": { "alias": "fit"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "artboardChange": "artboardChange"; }, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/component/bone.d.ts:11:90 - error TS2344: Type '{ length: { alias: "length"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"length"' is incompatible with index signature.
Type '{ alias: "length"; required: false; }' is not assignable to type 'string'.
11 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveBone, "riv-bone, [rivBone]", ["rivBone"], { "length": { "alias": "length"; "required": false; }; }, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/component/node.d.ts:14:90 - error TS2344: Type '{ x: { alias: "x"; required: false; }; y: { alias: "y"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"x"' is incompatible with index signature.
Type '{ alias: "x"; required: false; }' is not assignable to type 'string'.
14 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveNode, "riv-node, [rivNode]", ["rivNode"], { "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; }, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/component/root-bone.d.ts:13:107 - error TS2344: Type '{ x: { alias: "x"; required: false; }; y: { alias: "y"; required: false; }; length: { alias: "length"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"x"' is incompatible with index signature.
Type '{ alias: "x"; required: false; }' is not assignable to type 'string'.
13 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveRootBone, "riv-root-bone, [rivRootBone]", ["rivRootBone"], { "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "length": { "alias": "length"; "required": false; }; }, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/component/transform-component.d.ts:19:87 - error TS2344: Type '{ name: { alias: "name"; required: false; }; scale: { alias: "scale"; required: false; }; scaleX: { alias: "scaleX"; required: false; }; scaleY: { alias: "scaleY"; required: false; }; rotation: { alias: "rotation"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"name"' is incompatible with index signature.
Type '{ alias: "name"; required: false; }' is not assignable to type 'string'.
19 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveTransformComponent<any>, never, never, { "name": { "alias": "name"; "required": false; }; "scale": { "alias": "scale"; "required": false; }; "scaleX": { "alias": "scaleX"; "required": false; }; "scaleY": { "alias": "scaleY"; "required": false; }; "rotation": { "alias": "rotation"; "required": false; }; }, {}, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/player.d.ts:74:98 - error TS2344: Type '{ name: { alias: "name"; required: false; }; index: { alias: "index"; required: false; }; mix: { alias: "mix"; required: false; }; speed: { alias: "speed"; required: false; }; play: { alias: "play"; required: false; }; time: { ...; }; autoreset: { ...; }; mode: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"name"' is incompatible with index signature.
Type '{ alias: "name"; required: false; }' is not assignable to type 'string'.
74 static ɵdir: i0.ɵɵDirectiveDeclaration<RivePlayer, "riv-player, [rivPlayer]", ["rivPlayer"], { "name": { "alias": "name"; "required": false; }; "index": { "alias": "index"; "required": false; }; "mix": { "alias": "mix"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "play": { "alias": "play"; "required": false; }; "time": { "alias": "time"; "required": false; }; "autoreset": { "alias": "autoreset"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "load": "load"; "timeChange": "timeChange"; "playChange": "playChange"; "speedChange": "speedChange"; }, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/state-machine.d.ts:24:96 - error TS2344: Type '{ name: { alias: "name"; required: false; }; value: { alias: "value"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"name"' is incompatible with index signature.
Type '{ alias: "name"; required: false; }' is not assignable to type 'string'.
24 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveSMInput, "riv-input, [rivInput]", ["rivInput"], { "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; "load": "load"; }, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ng-rive/lib/state-machine.d.ts:57:123 - error TS2344: Type '{ name: { alias: "name"; required: false; }; index: { alias: "index"; required: false; }; speed: { alias: "speed"; required: false; }; play: { alias: "play"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"name"' is incompatible with index signature.
Type '{ alias: "name"; required: false; }' is not assignable to type 'string'.
57 static ɵdir: i0.ɵɵDirectiveDeclaration<RiveStateMachine, "riv-state-machine, [rivStateMachine]", ["rivStateMachine"], { "name": { "alias": "name"; "required": false; }; "index": { "alias": "index"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "play": { "alias": "play"; "required": false; }; }, { "load": "load"; "stateChange": "stateChange"; }, ["riveInputs"], never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.I created a stackblitz here https://stackblitz.com/~/github.com/jlaguio/rive-sample that recreates the issue.
Not sure if it's related to above, but in another project, I'm also encountering the following error.
Error when running `ng serve --o`. `my.component.ts` is a wrapper component for rive that contains the components based on the samples in the documentation.
Error: my.component.ts:15:7 - error NG8002: Can't bind to 'riv' since it isn't a known property of 'canvas'.
15 [riv]="name"
~~~~~~~~~~~~
Error: my.component.ts:23:11 - error NG8002: Can't bind to 'name' since it isn't a known property of 'riv-animation'.
1. If 'riv-animation' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'riv-animation' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
23 [name]="animationName"
~~~~~~~~~~~~~~~~~~~~~~
Error: my.component.ts29:11 - error NG8002: Can't bind to 'name' since it isn't a known property of 'riv-state-machine'.
1. If 'riv-state-machine' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'riv-state-machine' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
29 [name]="stateMachineName"
~~~~~~~~~~~~~~~~~~~~~~~~~
Error: my.component.ts:35:13 - error NG8002: Can't bind to 'name' since it isn't a known property of 'riv-input'.
1. If 'riv-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'riv-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
35 [name]="triggerInputName"
~~~~~~~~~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.
Kindly requesting help for this one, anyone can figure out what's going on?