Angular upgrade issue - wijmo.angular2.input

Posted by: sandeep.a.kurup on 23 May 2024, 11:15 am EST

    • Post Options:
    • Link

    Posted 23 May 2024, 11:15 am EST

    Hello,

    I was upgrading my angular application from 9 to 12. I have upgraded grapecity version from 5.20193.646 to 5.20213.834. After that I am getting lots of similar issues that mentioned below.

    Versions used

    Angular Version : 12.2.13

    TypeScript : 4.3.5

    Node: v14.20.0

    Packages used

    @grapecity/wijmo”: “^5.20213.834”,

    @grapecity/wijmo.angular2.core”: “^5.20213.834”,

    @grapecity/wijmo.angular2.grid”: “^5.20213.834”,

    @grapecity/wijmo.angular2.grid.detail”: “^5.20213.834”,

    @grapecity/wijmo.angular2.grid.filter”: “^5.20213.834”,

    @grapecity/wijmo.angular2.grid.grouppanel”: “^5.20213.834”,

    @grapecity/wijmo.angular2.input”: “^5.20213.834”,

    @grapecity/wijmo.grid”: “^5.20213.834”,

    @grapecity/wijmo.grid.detail”: “^5.20213.834”,

    @grapecity/wijmo.grid.filter”: “^5.20213.834”,

    @grapecity/wijmo.grid.xlsx”: “^5.20213.834”,

    @grapecity/wijmo.input”: “^5.20213.834”,

    @grapecity/wijmo.styles”: “^5.20213.834”,

    Sample error message on build.

    node_modules/@grapecity/wijmo.angular2.input/index.d.ts:708:18 - error TS2314: Generic type ‘ɵɵComponentDeclaration’ requires 7 type argument(s).

    708 static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<WjCalendar, “wj-calendar”, never, { “asyncBindings”: “asyncBindings”; “wjModelProperty”: “wjModelProperty”; “isDisabled”: “isDisabled”; “tabOrder”: “tabOrder”; “monthView”: “monthView”; “showHeader”: “showHeader”; “itemFormatter”: “itemFormatter”; “itemValidator”: “itemValidator”; “firstDayOfWeek”: “firstDayOfWeek”; “max”: “max”; “min”: “min”; “formatYearMonth”: “formatYearMonth”; “formatDayHeaders”: “formatDayHeaders”; “formatDays”: “formatDays”; “formatYear”: “formatYear”; “formatMonths”: “formatMonths”; “selectionMode”: “selectionMode”; “isReadOnly”: “isReadOnly”; “handleWheel”: “handleWheel”; “repeatButtons”: “repeatButtons”; “showYearPicker”: “showYearPicker”; “value”: “value”; “displayMonth”: “displayMonth”; “monthCount”: “monthCount”; “showMonthPicker”: “showMonthPicker”; “weeksBefore”: “weeksBefore”; “weeksAfter”: “weeksAfter”; “rangeEnd”: “rangeEnd”; “rangeMin”: “rangeMin”; “rangeMax”: “rangeMax”; }, { “initialized”: “initialized”; “gotFocusNg”: “gotFocus”; “lostFocusNg”: “lostFocus”; “refreshingNg”: “refreshing”; “refreshedNg”: “refreshed”; “invalidInputNg”: “invalidInput”; “valueChangedNg”: “valueChanged”; “valueChangePC”: “valueChange”; “rangeEndChangedNg”: “rangeEndChanged”; “rangeEndChangePC”: “rangeEndChange”; “rangeChangedNg”: “rangeChanged”; “displayMonthChangedNg”: “displayMonthChanged”; “displayMonthChangePC”: “displayMonthChange”; “formatItemNg”: “formatItem”; }, never, never, false, never>;

    Please help me to resolve the issue. Let me know if you require further information

  • Posted 24 May 2024, 6:36 am EST

    Hi Sandeep,

    It seems Wijmo packages from the latest Wijmo version are getting downloaded in your project, as the ‘^’ symbol is used before the package versions in your package.json file.

    These errors are observed after upgrading to the latest Wijmo version because Wijmo no longer provides support for Angular versions earlier than 14, starting from Wijmo build 5.20231.890-rc. This change is due to Angular requiring TypeScript 4.8 and up. While Wijmo itself can function with TypeScript 3.2, Wijmo’s Angular modules must now require TypeScript 4.8 to support the latest Angular releases.

    You can remove the ‘^’ symbol before the Wijmo package version to download the exact Wijmo version. You will not face this issue, until Wijmo version 5.20231.888 with Angular version 12 in your project.

    If you still wish to use our latest Wijmo build with Angular 12, you can do so by utilizing our legacy packages instead of the Angular2 packages. To access these legacy packages, please add ‘wijmo.angular2legacy.all’ to your package.json file. You can refer to the attached sample for it’s implementation, we have used the legacy packages in the sample.

    Regards

    angular12-Wijmo_legacy_package_sample.zip

    flexGrid_angular12-app.zip

  • Posted 24 May 2024, 11:38 am EST

    Thank you very much Vivek. You saved my day. The issue mentioned above got resolved. Do you have any idea on the error mentioned below? These 2 issues are pending for me related to the grapecity packages

    Error: node_modules/@grapecity/wijmo.grid.xlsx/index.d.ts:26:30 - error TS2307: Cannot find module ‘@grapecity/wijmo.grid.transposed’ or its corresponding type declarations.

    26 import * as mTransposed from ‘@grapecity/wijmo.grid.transposed’;

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Error: node_modules/@grapecity/wijmo.grid.xlsx/index.d.ts:27:38 - error TS2307: Cannot find module ‘@grapecity/wijmo.grid.transposedmultirow’ or its corresponding type declarations.

    27 import * as mTransposedMultiRow from ‘@grapecity/wijmo.grid.transposedmultirow’;

  • Posted 27 May 2024, 2:37 am EST

    Hello Sandeep,

    It seems that you are with the first solution shared by Vivek. And as per the provided error message, the package for wijmo.grid.xlsx, wijmo.grid.transposed, wijmo.grid.transposedmultirow packages are not installed correctly.

    Hence, we request to install the following packages:

    npm i @grapecity/wijmo.xlsx@5.20213.834

    npm i @grapecity/wijmo.grid.xlsx@5.20213.834

    npm i @grapecity/wijmo.grid.transposed@5.20213.834

    npm i @grapecity/wijmo.grid.transposedmultirow@5.20213.834

    Further, if you find this type of error, please navigate to the node_modules/@grapecity folder and search for folder that throws error “error TS2307: Cannot find module”.

    To resolve this, you may install the package at your end and it would start working.

    Regards,

    Manish Gupta

  • Posted 27 May 2024, 10:30 am EST

    Thanks Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels