ag-grid / ag-charts

AG Charts is a fully-featured and highly customizable JavaScript charting library. The professional choice for developers building enterprise applications
https://charts.ag-grid.com
Other
144 stars 9 forks source link

ag-charts on Angular 15: Property '"options"' is incompatible with index signature. #1991

Closed NateJBeck closed 1 month ago

NateJBeck commented 1 month ago

I'm submitting a ... (check one with "x")

[x] bug report

I am following the Quick Start guide found here https://charts.ag-grid.com/angular/quick-start/ for a Angular 15.2.10 application The application compiles cleanly until I import AG Charts anywhere in the application

// install the library
$ npm install ag-charts-angular
+ ag-charts-angular@10.0.0
// import AgCharts into app.module.ts OR in any lazy-loaded module OR in a standalone component
import { AgCharts } from 'ag-charts-angular';
@NgModule({
  declarations: [...],
  imports: [AgCharts]
// try to serve the application, see compile errors
$ ng serve

Error: node_modules/ag-charts-angular/lib/ag-charts.component.d.ts:12:74 - error TS2344: Type '{ options: { alias: "options"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"options"' is incompatible with index signature.
    Type '{ alias: "options"; required: false; }' is not assignable to type 'string'.

12     static ɵcmp: i0.ɵɵComponentDeclaration<AgCharts, "ag-charts", never, { "options": { "alias": "options"; "required": false; }; }, { "onChartReady": "onChartReady"; }, never, never, true, never>;
                                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ag-charts-angular/lib/ag-financial-charts.component.d.ts:12:93 - error TS2344: Type '{ options: { alias: "options"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"options"' is incompatible with index signature.
    Type '{ alias: "options"; required: false; }' is not assignable to type 'string'.

12     static ɵcmp: i0.ɵɵComponentDeclaration<AgFinancialCharts, "ag-financial-charts", never, { "options": { "alias": "options"; "required": false; }; }, { "onChartReady": "onChartReady"; }, never, never, true, never>;

Expected behavior

The application compiles cleanly after importing AgCharts

NOTE: I have tried adding skipLibCheck: true to tsconfig, which does remove the errors but does not fix the underlying issue. After adding <ag-charts [options]="options"></ag-charts> to a component within the module that imports AgCharts, I see the following error.

Error: src/app/lazy-loaded-module/mycomp/mycomp.component.html:14:16 - error NG8002: Can't bind to 'options' since it isn't a known property of 'ag-charts'.
1. If 'ag-charts' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ag-charts' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
14     <ag-charts [options]="options"></ag-charts>

Version issue? I did not see any compatibility chart in the docs nor the need to add a specific typings file, but could have missed something here. Thoughts welcome and thanks.

AG-DavidG commented 1 month ago

Hi @NateJBeck

This is a version issue. Starting from AG Charts version 10.0.0, we only support Angular versions of 16+.

This change was inadvertently left out of our release notes and documentation, and we have now corrected this.

Thanks for bringing this to our attention and apologies for the oversight on our part.

David