Updated angular project to version 12 from 9. After that module using Plotly.js is not working

Question

this is my app module file all bits and pieces are at the same place as mentioned in document

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import * as PlotlyJS from 'plotly.js-dist';
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyJS;

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PlotlyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

below is the error i am getting in cosole

main.ts:12 Error: Invalid PlotlyJS object. Please check https://github.com/plotly/angular-plotly.js#quick-start to see how to add PlotlyJS to your project.
    at new PlotlyModule (angular-plotly.js.js:520)
    at Object.PlotlyModule_Factory [as factory] (angular-plotly.js.js:529)
    at R3Injector.hydrate (core.js:11416)
    at R3Injector.get (core.js:11236)
    at core.js:11273
    at Set.forEach (<anonymous>)
    at R3Injector._resolveInjectorDefTypes (core.js:11273)
    at new NgModuleRef$1 (core.js:25336)
    at NgModuleFactory$1.create (core.js:25390)
    at core.js:29276

Did you also update the plotly libraries to their latest versions? — Explosion Pills
– Explosion Pills, Commented Jul 1, 2021 at 18:51

Dharman · Accepted Answer · 2021-07-01 19:04:46Z

1

I checked the documentation at https://www.npmjs.com/package/angular-plotly.js?activeTab=readme. Looks like the import varies for PlotlyJS:

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

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

PlotlyModule.plotlyjs = PlotlyJS;

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

edited Jul 1, 2021 at 19:04

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 1, 2021 at 18:59

nd10

2811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dewanshu Over a year ago

I tried this too but its also giving same error

Anubhav Trivedi · Accepted Answer · 2021-09-23 05:29:07Z

0

$ npm install angular-plotly.js plotly.js-dist-min --save

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

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

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

PlotlyModule.plotlyjs = PlotlyJS;

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

Add following piece to angular.json. This should resolve the issue.

{
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "scripts": [
                "node_modules/plotly.js-dist-min/plotly.min.js"
            ]
        }
    }
}

edited Sep 23, 2021 at 5:29

answered Sep 23, 2021 at 5:17

Anubhav Trivedi

1,2901 gold badge13 silver badges19 bronze badges

1 Comment

l -_- l Over a year ago

Please explain a little more about how this line could fix the issue, it didn't work for me

Collectives™ on Stack Overflow

Updated angular project to version 12 from 9. After that module using Plotly.js is not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related