Error while installing Plotly js with angular 12

Question

I am trying to install plotly js in angular 12 app by following this article. But I'm getting compilations error in typescript,

Please help me to solve this error.

AppMoudle.ts

After clearing the above compilation issue by following this article, I'm getting below build error

Build error

Answer 1

Try this:

npm install angular-plotly.js plotly.js-dist-min --save
npm install @types/plotly.js-dist-min --save-dev

In the AppModule, do the follow:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
    
import { PlotlyViaCDNModule } from 'angular-plotly.js';
    
PlotlyViaCDNModule.setPlotlyVersion('latest');
    
@NgModule({
    imports: [
        CommonModule,
        PlotlyViaCDNModule,
    ],
    ...
})
export class AppModule { }

Use the latest version of Plotly.js, but you can use a minor version as well.

You can take a look my project in Angular 12 with Plotly:

https://github.com/cristofima/AngularPlotly