TypeScript Error When Using ng-apexcharts During Build Time

[jxtorrez]

TypeScript Error When Using ng-apexcharts During Build Time

Description

I'm encountering a TypeScript error when trying to use ng-apexcharts in my Angular project. Specifically, I'm seeing the following error message:

Error: node_modules/ng-apexcharts/lib/chart/chart.component.d.ts:59:80 - error TS2344: Type '{ chart: { alias: "chart"; required: false; }; annotations: { alias: "annotations"; required: false; }; colors: { alias: "colors"; required: false; }; dataLabels: { alias: "dataLabels"; required: false; }; ... 18 more ...; autoUpdateSeries: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"chart"' is incompatible with index signature.
    Type '{ alias: "chart"; required: false; }' is not assignable to type 'string'.

59     static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "apx-chart", never, { "chart": { "alias": "chart"; "required": false; }; "annotations": { "alias": "annotations"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "dataLabels": { "alias": "dataLabels"; "required": false; }; "series": { "alias": "series"; "required": false; }; "stroke": { "alias": "stroke"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "markers": { "alias": "markers"; "required": false; }; "noData": { "alias": "noData"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "plotOptions": { "alias": "plotOptions"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "xaxis": { "alias": "xaxis"; "required": false; }; "yaxis": { "alias": "yaxis"; "required": false; }; "forecastDataPoints": { "alias": "forecastDataPoints"; "required": false; }; "grid": { "alias": "grid"; "required": false; }; "states": { "alias": "states"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "autoUpdateSeries": { "alias": "autoUpdateSeries"; "required": false; }; }, { "chartReady": "chartReady"; }, never, never, false, never>;

Steps to Reproduce:

1. Install ng-apexcharts using npm.
2. Set up a basic chart according to the documentation.
3. While attempting to compile, I encountered the error mentioned above.

Steps Tried:

• Reinstalled dependencies using npm install.
• Verified that the version of ng-apexcharts in package.json is "1.11.0".

Environment:

• Angular CLI version: 15
• Node.js version: 20

Please help me.

[abieru]

i have the same error

[dnyanesh94]

I am also facing same issue. node 16, 18, 22 with these version

[abieru]

work on version 1.10.0 ng-apexchart

[Digui225]

work on version 1.10.0 ng-apexchart

Merci beaucoup, j'ai resolu mon erreur grace à ta solution