Could not find a declaration file for module 'plotly.js/dist/plotly.js'

[priyatham-k]

"@angular/animations": "~11.0.9",
"@angular/common": "~11.0.9",
"@angular/compiler": "~11.0.9",
"@angular/core": "~11.0.9",
"@angular/forms": "~11.0.9",
"@angular/platform-browser": "~11.0.9",
"@angular/platform-browser-dynamic": "~11.0.9",
"@angular/router": "~11.0.9",
"angular-plotly.js": "^3.0.0",
"bootstrap": "^4.6.0",
"moment": "^2.29.1",
"ng-click-outside": "^7.0.1",
"ngx-color-picker": "^11.0.0",
"ngx-pagination": "^5.0.0",
"plotly.js": "^1.58.4",
"plotly.js-dist": "^1.58.4",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"

why I'm getting this
Could not find a declaration file for module 'plotly.js/dist/plotly.js'.

[andrefarzat]

Hello @priyatham-k , have you tried installing the @types/plotly.js package ?

[priyatham-k]

Thanks, @andrefarzat for responding, installed @types/plotly.js in the project, but no luck ,still the same error...

[andrefarzat]

@priyatham-k I did a research and find out that the .d.ts files for plotly is quite complicated. Please see this comment for a .d.ts file an user has created: plotly/plotly.js#28 (comment)

[StefanAleksik]

Same issue :( any news?

[andrefarzat]

@StefanAleksik have you checked the comment I mentioned ( plotly/plotly.js#28 (comment) ) ?

[brmc]

Is there any update on this? @andrefarzat, the comment you're referencing provides a TDS for 1.53 which is about a year old

[dongqiuyinggrace]

I have this issue as well. Does anyone has solution for this? I have been seeking fixing method for a whole day, very frustrated.

[CorentinMAG]

@dongqiuyinggrace
Actually you need to install plotly.js-dist via npm instead of plotly.js,
See this : #150 (comment)
and you can find more on stack overflow: https://stackoverflow.com/questions/54200157/should-i-install-plotly-js-or-plotly-js-dist-via-npm

npm uninstall plotly.js
npm install plotly.js-dist angular-plotly.js
npm install -D @types/plotly.js

then go to node_modules/@types and rename the plotly.js folder to plotly.js-dist

in app-module.ts

import { NgModule } from '@angular/core';

import * as PlotlyJS from 'plotly.js-dist';
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyJS;

@NgModule({
    imports: [CommonModule, PlotlyModule],
    ...
})
export class AppModule { }

and it should works

[dongqiuyinggrace]

It indeed works, thank you very much!

[brmc]

For anyone else coming along, the solution by @CorentinMAG works, but instead of renaming the directory, you should install it as an alias. that way you will have consistent environments wherever you need them

ng add @types/plotly.js-dist@npm:@types/plotly.js

[vladyslav-n]

@brmc big thanks for your suggestion, worked like a charm