Type '{ color: { alias: "color"; required: false; }; control: { alias: "control"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'

[aleksander351]

When installing the ngx-color-picker, version 16.1.0 we get multiple typing errors:

Error: node_modules/@iplab/ngx-color-picker/lib/components/chrome-picker/chrome-picker.component.d.ts:19:91 - error TS2344: Type '{ color: { alias: "color"; required: false; }; control: { alias: "control"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'. Property '"color"' is incompatible with index signature. Type '{ alias: "color"; required: false; }' is not assignable to type 'string'.

19 static ɵcmp: i0.ɵɵComponentDeclaration<ChromePickerComponent, "chrome-picker", never, { "color": { "alias": "color"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, { "colorChange": "colorChange"; }, never, ["[before]", "*"], false, never>;

Error: node_modules/@iplab/ngx-color-picker/lib/components/compact-picker/compact-picker.component.d.ts:16:93 - error TS2344: Type '{ color: { alias: "color"; required: false; }; control: { alias: "control"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"color"' is incompatible with index signature.
    Type '{ alias: "color"; required: false; }' is not assignable to type 'string'.

16     static ɵcmp: i0.ɵɵComponentDeclaration<CompactPickerComponent, "compact-picker", never, { "color": { "alias": "color"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, { "colorChange": "colorChange"; }, never, ["[before]", "*"], false, never>;

Error: node_modules/@iplab/ngx-color-picker/lib/components/github-picker/github-picker.component.d.ts:21:91 - error TS2344: Type '{ color: { alias: "color"; required: false; }; control: { alias: "control"; required: false; }; columns: { alias: "columns"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'. Property '"color"' is incompatible with index signature. Type '{ alias: "color"; required: false; }' is not assignable to type 'string'.

21 static ɵcmp: i0.ɵɵComponentDeclaration<GithubPickerComponent, "github-picker", never, { "color": { "alias": "color"; "required": false; }; "control": { "alias": "control"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; }, { "colorChange": "colorChange"; }, never, ["[before]", "*"], false, never>;

Error: node_modules/@iplab/ngx-color-picker/lib/components/ip-picker/ip-picker.component.d.ts:15:83 - error TS2344: Type '{ color: { alias: "color"; required: false; }; control: { alias: "control"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"color"' is incompatible with index signature.
    Type '{ alias: "color"; required: false; }' is not assignable to type 'string'.

15     static ɵcmp: i0.ɵɵComponentDeclaration<IpPickerComponent, "ip-picker", never, { "color": { "alias": "color"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, { "colorChange": "colorChange"; }, never, never, false, never>;

and many others.

I assume it has something to do with our typescript version:
"typescript": "4.8.4",
"@angular/core": "15.0.4",

[aleksander351]

"skipLibCheck": true,

makes the errors go away but I don't think it's the soundest solution.

[pIvan]

Hi @aleksander351, could you please update TypeScript? Angular v16 requires TypeScript version 4.9 or later, and >= 5.0.0 would be ideal.

[aleksander351]

Hi @pIvan we are currently not ready to update to Angular 16. We are still on version 15.

[pIvan]

No problem, but then ng-color-picker must also be of version >= 15.0.0, more precisely, 15.1.0.

[pIvan]

Update the package.json manually or use this command: npm install npm i @iplab/ngx-color-picker@15.1.0.

[aleksander351]

Installing ngx-color-picker@15.1.0 worked for our Angular version. Thank you so much for your help! Hvala puno!

[pIvan]

Molim ;)