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, Jul 01 '21 at 18:51

score 1 · Answer 1 · edited Jul 01 '21 at 19:04

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 01 '21 at 19:04

Dharman

30,962
25
85
135

answered Jul 01 '21 at 18:59

nd10

11
3

2

I tried this too but its also giving same error – Dewanshu Jul 01 '21 at 19:10

Anubhav Trivedi · Answer 2 · 2021-09-23T05:29:07.717

$ 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"
            ]
        }
    }
}

Please explain a little more about how this line could fix the issue, it didn't work for me — l -_- l, May 21 '23 at 16:31

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

2 Answers2