How to fix `TypeError: this is undefined` when using plotly.js in angular 8? - frontend

Question

I am unable to use plotly.js in my angular 8 app.
I am quite new to angular and front end development in general.
I followed the instructions found here https://github.com/plotly/angular-plotly.js/blob/master/README.md
Using angular CLI
$ ng new my-project
$ cd my-project
$ npm install angular-plotly.js plotly.js --save
Added the PlotlyModule into app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import * as PlotlyJS from 'plotly.js/dist/plotly.js';
import { PlotlyModule } from 'angular-plotly.js';
PlotlyModule.plotlyjs = PlotlyJS;
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PlotlyExampleComponent } from './plotly-example/plotly-example.component';
#NgModule({
declarations: [
AppComponent,
PlotlyExampleComponent
],
imports: [
BrowserModule,
AppRoutingModule,
PlotlyModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
then did ng generate component plotly-example
Added the following code to plotly-example.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-plotly-example',
template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
})
export class PlotlyExampleComponent {
public 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'}
};
}
After I run ng serve and open http://localhost:4200/, I get a blank page.
Upon doing Inspect element and going to console I see
TypeError: this is undefined[Learn More]
plotly.js:24902
./node_modules/plotly.js/dist/plotly.js/</<[164]</<
plotly.js:24902
./node_modules/plotly.js/dist/plotly.js/</<[164]<
plotly.js:24895
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[719]<
plotly.js:106941
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[1]<
plotly.js:10
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[697]<
plotly.js:104010
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[14]<
plotly.js:242
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[25]<
plotly.js:385
o
plotly.js:7:622
r
plotly.js:7:792
./node_modules/plotly.js/dist/plotly.js/<
plotly.js:7:359
./node_modules/plotly.js/dist/plotly.js/<
plotly.js:7:72
./node_modules/plotly.js/dist/plotly.js
plotly.js:7
__webpack_require__
bootstrap:79
./src/app/app.module.ts
http://localhost:4200/main.js:388:82
__webpack_require__
bootstrap:79
./src/main.ts
http://localhost:4200/main.js:503:73
__webpack_require__
bootstrap:79
[0]
http://localhost:4200/main.js:527:18
__webpack_require__
bootstrap:79
checkDeferredModules
bootstrap:45
webpackJsonpCallback
bootstrap:32
<anonymous>
http://localhost:4200/main.js:1:2
InnerModuleEvaluation self-hosted:4097:5 evaluation self-hosted:4043:9

Answer 1

I had the same error but once I changed to PlotlyViaCDNModule it worked.
So on the app.module.ts
import { PlotlyViaCDNModule } from 'angular-plotly.js';
PlotlyViaCDNModule.plotlyVersion = 'latest';
PlotlyViaCDNModule.plotlyBundle = null;
#NgModule({
imports: [
PlotlyViaCDNModule,
...
],

Answer 2

I found comment for this issue from here, Cannot read property 'document' of undefined #75
As a quick solution, changing in the tsconfig.json the compilerOptions.target property to "es5" might solve the issue. Or using PlotlyViaCDNModule or PlotlyViaWindowModule to avoid the angular transpiler to minify the plotly.js code.
So you need to change it.
"target": "es2015" to "target": "es5",
Don't forget add selector to your app.component.html as below,
<div>
<app-plotly-example></app-plotly-example>
</div>