Quick Start gives Error: Peer dependency plotly.js isn't installed Angular 12 #183
Description
Good morning, I hope you are very well.
Sorry I have an error (I don't know if it is a bug) when trying to implement angular-plotly with Angular 12, I follow the quick start steps, without any error at the time of installation, but after having everything configured and observing the console of from the browser, I see this error:
angular-plotly.js.js:260 Error while plotting: Error: Peer dependency plotly.js isn't installed
at PlotlyService.getPlotly (angular-plotly.js.js:51)
at angular-plotly.js.js:66
at localFn (angular-plotly.js.js:58)
at angular-plotly.js.js:60
at new ZoneAwarePromise (zone.js:1387)
at PlotlyService.waitFor (angular-plotly.js.js:56)
at PlotlyService.<anonymous> (angular-plotly.js.js:66)
at Generator.next (<anonymous>)
at tslib.es6.js:76
at new ZoneAwarePromise (zone.js:1387)
(anónimo) @ angular-plotly.js.js:260
invoke @ zone.js:372
onInvoke @ core.js:28680
invoke @ zone.js:371
run @ zone.js:134
(anónimo) @ zone.js:1276
invokeTask @ zone.js:406
onInvokeTask @ core.js:28667
invokeTask @ zone.js:405
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:582
Promise.then (asíncrono)
scheduleMicroTask @ zone.js:565
scheduleTask @ zone.js:396
onScheduleTask @ zone.js:283
scheduleTask @ zone.js:386
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1266
resolvePromise @ zone.js:1204
(anónimo) @ zone.js:1120
webpackJsonpCallback @ jsonp chunk loading:75
(anónimo) @ src_app_mayo_dashboard_maintanence_maintanence-routing_module_ts.js:2
core.js:6486 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'data')
TypeError: Cannot read properties of undefined (reading 'data')
at PlotlyComponent.createFigure (angular-plotly.js.js:267)
at angular-plotly.js.js:163
at ZoneDelegate.invoke (zone.js:372)
at Object.onInvoke (core.js:28680)
at ZoneDelegate.invoke (zone.js:371)
at Zone.run (zone.js:134)
at zone.js:1276
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28667)
at ZoneDelegate.invokeTask (zone.js:405)
at resolvePromise (zone.js:1213)
at zone.js:1283
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28667)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at drainMicroTaskQueue (zone.js:582)
The commands I have used are:
$ npm install angular-plotly.js plotly.js-dist-min --save
$ npm install @types/plotly.js-dist-min --save-dev
My Module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FagorComponent } from './components/fagor/fagor.component';
import { SharedModule } from 'src/app/shared/shared.module';
import * as PlotlyJS from 'plotly.js-dist-min';
import { PlotlyModule } from 'angular-plotly.js';
PlotlyModule.plotlyjs = PlotlyJS;
@NgModule({
declarations: [
FagorComponent
],
imports: [
CommonModule,
SharedModule,
PlotlyModule
]
})
export class MaintanenceModule { }
My Component:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { TextBox } from 'src/app/shared/models/text-box.model';
import { FagorService } from '../../services/fagor.service';
@Component({
selector: 'app-fagor',
templateUrl: './fagor.component.html',
styleUrls: ['./fagor.component.css']
})
export class FagorComponent implements OnInit {
graph = {
data: [
{ x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
],
layout: {width: 320, height: 240, title: 'A Fancy Plot'}
};
constructor() { }
ngOnInit(): void {
}
}
HTML:
<div class="col-12 mt-4">
<div class="card">
<div class="card-body">
<h3 class="card-title"><strong>ALARMAS</strong></h3>
<div class="row">
<div class="col-12 mt-3">
<h1>hola</h1>
<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>
</div>
</div>
</div>
</div>
</div>
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.2.12
Node: 14.18.2
Package Manager: npm 7.16.0
OS: win32 x64
Angular: 12.2.12
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.12
@angular-devkit/build-angular 12.2.12
@angular-devkit/core 12.2.12
@angular-devkit/schematics 12.2.12
@schematics/angular 12.2.12
rxjs 6.6.7
typescript 4.3.5
What could the error be about?