Compile failed, once include ng-multiselect-dropdown with error: TS2344

[hengway]

Angular version: 15

Angular CLI: 15.2.9
Node: 18.14.2
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 15.2.9
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.9
@angular-devkit/build-angular   15.2.9
@angular-devkit/core            15.2.9
@angular-devkit/schematics      15.2.9
@schematics/angular             15.2.9
rxjs                            7.8.1
typescript                      4.9.5

ng-multiselect-dropdown version: 1.0.0 (the issue not happen on 0.3.9)

Description of issue: Error TS2344 once include the library

Error: node_modules/ng-multiselect-dropdown/multiselect.component.d.ts:53:100 - error TS2344: Type '{ placeholder: { alias: "placeholder"; required: false; }; disabled: { alias: "disabled"; required: false; }; settings: { alias: "settings"; required: false; }; data: { alias: "data"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"placeholder"' is incompatible with index signature.
    Type '{ alias: "placeholder"; required: false; }' is not assignable to type 'string'.

53     static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;

Steps to reproduce:

1. run npm install ng-multiselect-dropdown
2. run ng serve

Expected result: no error expect

Actual result: show compile error when run ng serve

Demo: Please share sample code link using StackBlitz or codesandbox

Any relevant code:

[ksrikanthreddy]

Getting same error...
I think the issue is here:

[RBaldoy]

Same error with Angular 15

[RiLaRos]

Same error with Angular 16, this fix changing the line:
{ "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;
with:
static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, never>;

[aksuna]

with Angular 15
and ng-multiselect-dropdown : 1.0.0
Please provide fix for Angular 15 , I try what was propose above for Angular 16 but it didnt work
Error: node_modules/ng-multiselect-dropdown/multiselect.component.d.ts:53:100 - error TS2344: Type '{ placeholder: { alias: "placeholder"; required: false; }; disabled: { alias: "disabled"; required: false; }; settings: { alias: "settings"; required: false; }; data: { alias: "data"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"placeholder"' is incompatible with index signature.
Type '{ alias: "placeholder"; required: false; }' is not assignable to type 'string'.

53 static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;

[fdogan0]

with Angular 15
and ng-multiselect-dropdown : 1.0.0
Fix for Angular 15 , I try what was propose above for Angular 16 but it didnt work
Error: node_modules/ng-multiselect-dropdown/multiselect.component.d.ts:53:100 - error TS2344: Type '{ placeholder: { alias: "placeholder"; required: false; }; disabled: { alias: "disabled"; required: false; }; settings: { alias: "settings"; required: false; }; data: { alias: "data"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"placeholder"' is incompatible with index signature.
Type '{ alias: "placeholder"; required: false; }' is not assignable to type 'string'.

53 static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;

[Kesavan8384]

Error: node_modules/ng-multiselect-dropdown/multiselect.component.d.ts:53:100 - error TS2344: Type '{ placeholder: { alias: "placeholder"; required: false; }; disabled: { alias: "disabled"; required: false; }; settings: { alias: "settings"; required: false; }; data: { alias: "data"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"placeholder"' is incompatible with index signature.
Type '{ alias: "placeholder"; required: false; }' is not assignable to type 'string'.

53 static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;

[durveshparmar]

Angular 16:

Same Error;
Error: node_modules/ng-multiselect-dropdown/multiselect.component.d.ts:53:100 - error TS2344: Type '{ placeholder: { alias: "placeholder"; required: false; }; disabled: { alias: "disabled"; required: false; }; settings: { alias: "settings"; required: false; }; data: { alias: "data"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"placeholder"' is incompatible with index signature.
Type '{ alias: "placeholder"; required: false; }' is not assignable to type 'string'.

53 static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;

[pawan-atl]

Angular 15 (before upgrading to v16) testing ng-multiselect-dropdown version v1.0.0 getting same error:-

Error: node_modules/ng-multiselect-dropdown/multiselect.component.d.ts:53:100 - error TS2344: Type '{ placeholder: { alias: "placeholder"; required: false; }; disabled: { alias: "disabled"; required: false; }; settings: { alias: "settings"; required: false; }; data: { alias: "data"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"placeholder"' is incompatible with index signature.
Type '{ alias: "placeholder"; required: false; }' is not assignable to type 'string'.

53 static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;
~~~~~~~~

[pawan-atl]

Angular version: 15

Angular CLI: 15.2.9
Node: 18.14.2
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 15.2.9
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.9
@angular-devkit/build-angular   15.2.9
@angular-devkit/core            15.2.9
@angular-devkit/schematics      15.2.9
@schematics/angular             15.2.9
rxjs                            7.8.1
typescript                      4.9.5

ng-multiselect-dropdown version: 1.0.0 (the issue not happen on 0.3.9)

Description of issue: Error TS2344 once include the library

Error: node_modules/ng-multiselect-dropdown/multiselect.component.d.ts:53:100 - error TS2344: Type '{ placeholder: { alias: "placeholder"; required: false; }; disabled: { alias: "disabled"; required: false; }; settings: { alias: "settings"; required: false; }; data: { alias: "data"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"placeholder"' is incompatible with index signature.
    Type '{ alias: "placeholder"; required: false; }' is not assignable to type 'string'.

53     static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ng-multiselect-dropdown", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "onFilterChange": "onFilterChange"; "onDropDownClose": "onDropDownClose"; "onSelect": "onSelect"; "onDeSelect": "onDeSelect"; "onSelectAll": "onSelectAll"; "onDeSelectAll": "onDeSelectAll"; }, never, never, false, never>;

Steps to reproduce:

1. run npm install ng-multiselect-dropdown
2. run ng serve

Expected result: no error expect

Actual result: show compile error when run ng serve

Demo: Please share sample code link using StackBlitz or codesandbox

Any relevant code:

Any luck mate? This particular library is stopping us to migrate angular from v15 -> v16+

[Yura13]

Any updates?