[Bug]: Cannot build 16.0.1 because of incorrect types

[kumaheiyama]

What happened?

Several internal components are complaining about incorrect types. Tried running npm audit fix to see if it can be easily corrected, but alas.

Tried using version 15.3.0 instead, which does build correctly, but has other issues.

Version

16.0.1

Angular Version

15.0.4

What browsers are you seeing the problem on?

No response

Link to reproduce

No response

Relevant log output

Error: node_modules/ngx-editor/lib/components/image-view/image-view.component.d.ts:16:89 - error TS2344: Type '{ src: { alias: "src"; required: false; }; alt: { alias: "alt"; required: false; }; title: { alias: "title"; required: false; }; outerWidth: { alias: "outerWidth"; required: false; }; selected: { alias: "selected"; required: false; }; view: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"src"' is incompatible with index signature.
    Type '{ alias: "src"; required: false; }' is not assignable to type 'string'.

16     static ɵcmp: i0.ɵɵComponentDeclaration<ImageViewComponent, "ngx-image-view", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "title": { "alias": "title"; "required": false; }; "outerWidth": { "alias": "outerWidth"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "view": { "alias": "view"; "required": false; }; }, { "imageResize": "imageResize"; }, never, never, false, never>;
                                                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/editor.component.d.ts:32:85 - error TS2344: Type '{ editor: { alias: "editor"; required: false; }; outputFormat: { alias: "outputFormat"; required: false; }; placeholder: { alias: "placeholder"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"editor"' is incompatible with index signature.
    Type '{ alias: "editor"; required: false; }' is not assignable to type 'string'.

32     static ɵcmp: i0.ɵɵComponentDeclaration<NgxEditorComponent, "ngx-editor", never, { "editor": { "alias": "editor"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "focusOut": "focusOut"; "focusIn": "focusIn"; }, never, ["*"], false, never>;
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/modules/menu/bubble/bubble.component.d.ts:28:82 - error TS2344: Type '{ editor: { alias: "editor"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"editor"' is incompatible with index signature.
    Type '{ alias: "editor"; required: false; }' is not assignable to type 'string'.

28     static ɵcmp: i0.ɵɵComponentDeclaration<BubbleComponent, "ngx-bubble", never, { "editor": { "alias": "editor"; "required": false; }; }, {}, never, never, false, never>;
                                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/modules/menu/color-picker/color-picker.component.d.ts:35:93 - error TS2344: Type '{ presets: { alias: "presets"; required: false; }; type: { alias: "type"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"presets"' is incompatible with index signature.
    Type '{ alias: "presets"; required: false; }' is not assignable to type 'string'.

35     static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "ngx-color-picker", never, { "presets": { "alias": "presets"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, false, never>;
                                                                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/modules/menu/dropdown/dropdown.component.d.ts:30:86 - error TS2344: Type '{ group: { alias: "group"; required: false; }; items: { alias: "items"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"group"' is incompatible with index signature.
    Type '{ alias: "group"; required: false; }' is not assignable to type 'string'.

30     static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "ngx-dropdown", never, { "group": { "alias": "group"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, {}, never, never, false, never>;
                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/modules/menu/floating-menu/floating-menu.component.d.ts:30:102 - error TS2344: Type '{ editor: { alias: "editor"; required: false; }; autoPlace: { alias: "autoPlace"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"editor"' is incompatible with index signature.
    Type '{ alias: "editor"; required: false; }' is not assignable to type 'string'.

30     static ɵcmp: i0.ɵɵComponentDeclaration<FloatingMenuComponent, "ngx-editor-floating-menu", never, { "editor": { "alias": "editor"; "required": false; }; "autoPlace": { "alias": "autoPlace"; "required": false; }; }, {}, never, ["*"], false, never>;
                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/modules/menu/insert-command/insert-command.component.d.ts:25:97 - error TS2344: Type '{ toolbarItem: { alias: "toolbarItem"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"toolbarItem"' is incompatible with index signature.
    Type '{ alias: "toolbarItem"; required: false; }' is not assignable to type 'string'.

25     static ɵcmp: i0.ɵɵComponentDeclaration<InsertCommandComponent, "ngx-insert-command", never, { "toolbarItem": { "alias": "toolbarItem"; "required": false; }; }, {}, never, never, false, never>;
                                                                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/modules/menu/menu.component.d.ts:29:85 - error TS2344: Type '{ toolbar: { alias: "toolbar"; required: false; }; colorPresets: { alias: "colorPresets"; required: false; }; disabled: { alias: "disabled"; required: false; }; editor: { alias: "editor"; required: false; }; customMenuRef: { ...; }; dropdownPlacement: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"toolbar"' is incompatible with index signature.
    Type '{ alias: "toolbar"; required: false; }' is not assignable to type 'string'.

29     static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "ngx-editor-menu", never, { "toolbar": { "alias": "toolbar"; "required": false; }; "colorPresets": { "alias": "colorPresets"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "customMenuRef": { "alias": "customMenuRef"; "required": false; }; "dropdownPlacement": { "alias": "dropdownPlacement"; "required": false; }; }, {}, never, never, false, never>;
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-editor/lib/modules/menu/toggle-command/toggle-command.component.d.ts:26:97 - error TS2344: Type '{ toolbarItem: { alias: "toolbarItem"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"toolbarItem"' is incompatible with index signature.
    Type '{ alias: "toolbarItem"; required: false; }' is not assignable to type 'string'.

26     static ɵcmp: i0.ɵɵComponentDeclaration<ToggleCommandComponent, "ngx-toggle-command", never, { "toolbarItem": { "alias": "toolbarItem"; "required": false; }; }, {}, never, never, false, never>;

Willing to submit a PR?

None

[Febriansyah11]

Click the path shown in the error, updated this code: static ɵpipe: i0.ɵɵPipeDeclaration<SanitizeHtmlPipe, "sanitizeHtml", false>

to this: static ɵpipe: i0.ɵɵPipeDeclaration<SanitizeHtmlPipe, "sanitizeHtml">

Please update @sibiraj-s

[sibiraj-s]

I completely missed this. Based on the issue description. editor v16 requires angular 16. Please make sure correct version is used.

[sibiraj-s]

Closing this issue, assuming the error is due to incorrect angular version. Feel free to reopen if you think this is an issue with editor or create a discussion for other help.

Thank you.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in the thread.