Как исправить `TypeError: это не определено` при использовании plotly.js в angular 8?

Question

Я не могу использовать plotly.js в своем приложении angular 8. Я совершенно новичок в разработке углов и внешнего интерфейса в целом. Я следовал инструкциям, найденным здесь https://github.com/plotly/angular-plotly.js/blob/master/README.md Используя угловой CLI

$ ng new my-project
$ cd my-project
$ npm install angular-plotly.js plotly.js --save

Добавил PlotlyModule в 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 { }

, затем сделал ng generate component plotly-example

Добавлен следующий код в 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'}
    };
}

После запуска ng serve и открытия http://localhost:4200/ я получаю пустую страницу. После выполнения проверки элемента и перехода к консоли я вижу

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

Я нашел комментарий к этой проблеме отсюда, Невозможно прочитать свойство 'document' с неопределенным # 75

Как быстрое решение, изменив в tsconfig.json compilerOptionsСвойство .target для "es5" может решить проблему. Или используя PlotlyViaCDNModule или PlotlyViaWindowModule, чтобы избежать использования углового транспилятора для минимизации кода plotly.js.

Так что вам нужно изменить его.
"target": "es2015" на "target": "es5",

Не забудьте добавить селектор к вашему app.component.html, как показано ниже,

 <div>
   <app-plotly-example></app-plotly-example>
 </div>