ngx-charts: error TS7016: Could not find a declaration file for module 'd3-scale'. Versions 19.1.0 through 20.1.2
Describe the bug I updated my project to use the version 19.1.0, and now I get this build error:
✔ Browser application bundle generation complete.
Warning: C:\ClientApp\node_modules@swimlane\ngx-charts_ivy_ngcc_\fesm2015\swimlane-ngx-charts.js depends on ‘clone-deep’. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Error: node_modules/@swimlane/ngx-charts/lib/box-chart/box-chart.component.d.ts:5:40 - error TS7016: Could not find a declaration file for module ‘d3-scale’. ‘C:/ClientApp/node_modules/d3-scale/dist/d3-scale.js’ implicitly has an ‘any’ type. Try
npm i --save-dev @types/d3-scaleif it exists or add a new declaration (.d.ts) file containingdeclare module 'd3-scale';5 import { ScaleLinear, ScaleBand } from ‘d3-scale’; ~~~~~~~~~~
Error: node_modules/@swimlane/ngx-charts/lib/box-chart/box-series.component.d.ts:2:40 - error TS7016: Could not find a declaration file for module ‘d3-scale’. ‘C:/ClientApp/node_modules/d3-scale/dist/d3-scale.js’ implicitly has an ‘any’ type. Try
npm i --save-dev @types/d3-scaleif it exists or add a new declaration (.d.ts) file containingdeclare module 'd3-scale';2 import { ScaleLinear, ScaleBand } from ‘d3-scale’; ~~~~~~~~~~
Error: node_modules/@swimlane/ngx-charts/lib/box-chart/box.component.d.ts:2:26 - error TS7016: Could not find a declaration file for module ‘d3-selection’. ‘C:/ClientApp/node_modules/d3-selection/dist/d3-selection.js’ implicitly has an ‘any’ type. Try
npm i --save-dev @types/d3-selectionif it exists or add a new declaration (.d.ts) file containingdeclare module 'd3-selection';2 import { BaseType } from ‘d3-selection’; ~~~~~~~~~~~~~~
Error: node_modules/@swimlane/ngx-charts/lib/bubble-chart/bubble-chart.utils.d.ts:1:52 - error TS7016: Could not find a declaration file for module ‘d3-scale’. ‘C:/ClientApp/node_modules/d3-scale/dist/d3-scale.js’ implicitly has an ‘any’ type. Try
npm i --save-dev @types/d3-scaleif it exists or add a new declaration (.d.ts) file containingdeclare module 'd3-scale';1 import { ScaleLinear, ScalePoint, ScaleTime } from ‘d3-scale’;
ngx-charts version 19.1.0
Additional context when I revert to version 19.0.1, everything works again. Angular 12.2.9
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 18
- Comments: 24
you should specify @types/d3 in peer dependencies
this is a bug
Newly installed ngx-charts today in my Angular project and this fixed it for me.
npm install @types/d3 --save-devyou should install @types/d3 in dev dependencies
this is not a bug
This is the same bug case as in #1620
The thing is my project does not make direct use of that
@types/d3, it is a dependency of@swimlane/ngx-charts, so they have to include@types/d3as their dependency.Clearly it was skipped from 19.0.1 to 19.1.0, same as
@types/d3-shapewas skipped when moving from 17.0.1 to 18.0.0 (solved in #1620)This should be specified in documentation, I am a brand new user, when it comes to getting started it only says to install ngx-charts, I think you should just put npm install @types/d3 --save-dev as well to reduce confusion, a lot of libraries include such additional information, no shame in including it.
Agree with @jlquijada We should not add
@types/d3dependency in our project => don’t use it. It’s ngx-charts responsability to specifiy a dependency to@types/d3Please fix this so we all can remove this dependency of our projects. Pull request #1727 can take care of this
Still getting this problem with version 20.0.1 😦
Still getting this problem with version 20.1.0 😦 Note that I’m aware of the possible patch on my side, it is just that it is not my responsibility to keep third-party dependencies that my project does not directly reference. Until it is fixed, I prefer to stay in version 19.0.1, as I don’t need the latest features/changes on
@swimlane/ngx-charts.With ngx-charts 20.0.1 and Angular 13 I get build errors and have to google the solution.
Installing
@types/d3as a dev dependency solved the problem for me. Please add@types/d3to your peer-dependencies so people looking there find the solution.This problem persists with version 19.2.0
I agree with @jlquijada I just installed v20.0.1 and got the same error, I had to run
npm install @types/d3 --save-devas suggested by @BingeCode and it works. I hope they can fix this as soon as possible.why do we need @types/d3 dependency in our project? it should be ngx chart responsibility. This library is a pain the arse!!!
Still unsolved, will phase-out this package in favor of
"chart.js": "^4.0.1",ASAP (much simpler, no dependencies, and does the same job for my project without problems)when i installed npm install @types/d3 --save-dev i have got this error
./node_modules/@angular/cdk/fesm2015/portal.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js): TypeError: Cannot create property ‘message’ on string 'C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules@angular\cdk\fesm2015\portal.mjs: This application depends upon a library published using Angular version 14.0.1, which requires Angular version 14.0.0 or newer to work correctly. Consider upgrading your application to use a more recent version of Angular. 413 | } 414 | CdkPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: “12.0.0”, version: “14.0.1”, ngImport: i0, type: CdkPortal, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.