Could not find a declaration file for module 'ods-charts'.

[nbossard]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I made a very simple test graph using sample at https://github.com/Orange-OpenSource/ods-charts/tree/main/test/angular-ngx-echarts and angular 17.
I had to make a few adaptations for Angular 17 not using app.module.ts anymore.

Finally I blocked on this issue at build time :

Application bundle generation failed. [8.261 seconds]
✘ [ERROR] TS7016: Could not find a declaration file for module 'ods-charts'. '/builds/OrangeMoney/Retailer/pilotagedistri/business-server/proto/proto-elastic-iframe/node_modules/ods-charts/dist/ods-charts.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/ods-charts` if it exists or add a new declaration (.d.ts) file containing `declare module 'ods-charts';` [plugin angular-compiler]
    src/app/test-ods-charts/test-ods-charts.component.ts:4:27:
      4 │ import * as ODSCharts from 'ods-charts';
        ╵                            ~~~~~~~~~~~~

I solved it by going to folder node_modules/ods-charts and move all files in "dist" folder to parent folder. Command used was : mv dist/* .

It ran well after that... but only on my local computer. Is there an issue with the packaging of the library?

Reduced test cases

• use angular 17
• run ng new odsbug, cd odsbug
• run ng generate component chart
• add following lines in package.json :

    "echarts": "^5.4.3",
    "ngx-echarts": "^17.1.0",
    "ods-charts": "^0.1.0-alpha.2",

• run npm install
• add following lines in src/app/chart/chart.component.html

<div
  echarts
  [options]="options"
  [merge]="mergeOptions"
  [theme]="myTheme.theme"
  class="demo-chart"
  (chartInit)="onChartInit($event)"
></div>

• add following in src/app/chart/chart.component.ts

import { Component } from '@angular/core';
import { ECharts, EChartsOption } from 'echarts';
import { NgxEchartsModule } from 'ngx-echarts';
import * as ODSCharts from 'ods-charts';

@Component({
  selector: 'app-graph',
  standalone: true,
  imports: [NgxEchartsModule],
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.sass'],
})
export class ChartsComponent {
  public options: EChartsOption = {
    legend: {},
    tooltip: {},
    dataset: {
      // Provide a set of data.
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Lattte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1],
      ],
    },
    // Declare an x-axis (category axis).
    // The category map the first column in the dataset by default.
    xAxis: { type: 'category' },
    // Declare a y-axis (value axis).
    yAxis: {},
    // Declare several 'bar' series,
    // every series will auto-map to each column by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
  };
  public myTheme: ODSCharts.ODSChartsTheme;

  constructor() {
    this.myTheme = ODSCharts.getThemeManager({
      mode: ODSCharts.ODSChartsMode.LIGHT,
      categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS,
      visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
      lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
    });
  }

  public onChartInit(ec: ECharts) {
    this.options = this.myTheme
      .setDataOptions(this.options)
      .externalizeLegends(ec, '#legend')
      .externalizePopover()
      .getChartOptions();
  }
}



What operating system(s) are you seeing the problem on?

macOS, Linux

What browser(s) are you seeing the problem on?

No response

What version of ODS Charts are you using?

1.0.0 alpha 2

[nbossard]

To solve it :

• cd node_modules/ods-charts
• mv dist/* .

[nbossard]

Another solution to solve it apply this patch :

diff --git a/node_modules/ods-charts/package.json b/node_modules/ods-charts/package.json
index f518d00..7e0e845 100644
--- a/node_modules/ods-charts/package.json
+++ b/node_modules/ods-charts/package.json
@@ -9,7 +9,7 @@
     "./dist/**/*"
   ],
   "main": "./dist/ods-charts.js",
-  "types": "./dist/ods-charts.d.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "webpack",
     "netlify": "npm run build ; cp -R dist docs/ ; npm run typedoc",

[nbossard]

Forking the repo in the meantime...

[nbossard]

Tested ok for me, thanks