在angular 8中使用plotly.js时，如何修复` `TypeError: this is unfined`？
我无法在我的angular 8应用程序中使用plotly.js。一般来说，我对angular和前端开发都是相当陌生的。我按照这里的说明使用angular CLI https://github.com/plotly/angular-plotly.js/blob/master/README.md
$ ng new my-project
$ cd my-project
$ npm install angular-plotly.js plotly.js --save在app.module.ts中添加了PlotlyModule
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/之后，我得到一个空白页面。在执行Inspect元素并转到控制台时，我看到
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回答 2
Stack Overflow用户
发布于 2019-12-19 01:21:54
我也有过同样的错误，但是一旦我切换到PlotlyViaCDNModule，它就可以工作了。
所以在app.module.ts上
import { PlotlyViaCDNModule } from 'angular-plotly.js';
PlotlyViaCDNModule.plotlyVersion = 'latest';
PlotlyViaCDNModule.plotlyBundle = null;@NgModule({
imports: [
PlotlyViaCDNModule,
...
],Stack Overflow用户
发布于 2019-10-11 11:59:53
我在这里找到了关于这个问题的评论，Cannot read property 'document' of undefined #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>https://stackoverflow.com/questions/58329345
复制相似问题
腾讯云开发者
