I'm trying to install ngx-color-picker in my Angular application following these instructions:
https://www.npmjs.com/package/ngx-color-picker/v/16.0.0
Installing it using the command below works successfully:
npm install ngx-color-picker --save
I can run ng serve and no error occurs.
But when I import it like below:
import { ColorPickerModule } from 'ngx-color-picker';
@NgModule({
...
imports: [
...
ColorPickerModule
]
})
I get this error when executing ng serve:
Error: node_modules/ngx-color-picker/lib/color-picker.directive.d.ts:108:103 - error TS2344: Type '{ colorPicker: { alias: "colorPicker"; required: false; }; cpWidth: { alias: "cpWidth"; required: false; }; cpHeight: { alias: "cpHeight"; required: false; }; cpToggle: { alias: "cpToggle"; required: false; }; ... 33 more ...; cpExtraTemplate: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"colorPicker"' is incompatible with index signature.
Type '{ alias: "colorPicker"; required: false; }' is not assignable to type 'string'.
I'm using Angular 15.
There seems to be some problem with versions 15 and 16, it could be due to combability issues with angular or typescript. I was able to replicate the scenario in stackblitz and version 14 still works great, kindly install that and check if it works, below is a stackblitz of the same for reference!
npm install ngx-color-picker@14 --save
package.json snippet
"dependencies": {
"@angular/animations": "^15.2.0",
"@angular/common": "^15.2.0",
"@angular/compiler": "^15.2.0",
"@angular/core": "^15.2.0",
"@angular/forms": "^15.2.0",
"@angular/platform-browser": "^15.2.0",
"@angular/platform-browser-dynamic": "^15.2.0",
"@angular/router": "^15.2.0",
"ngx-color-picker": "^14.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},