Plotly.js 不适用于 SSR Angular 应用程序答案

【问题标题】：Plotly.js not working with SSR Angular applicationPlotly.js 不适用于 SSR Angular 应用程序
【发布时间】：2019-12-10 23:41:07
【问题描述】：

我正在尝试使用 SSR 构建一个 Angular 应用程序，但我遇到了 plotly.js 的问题。这是我得到的错误：

C:\Users\x\Desktop\Angularapp\ngseo\dist\server.js:351783
    var style = document.getElementById(id);
                ^
ReferenceError: 文档未定义

你知道如何解决这个错误吗？

【问题讨论】：

您使用的是 Agularjs 还是 Angular 2？如果您使用 angular 2，那么这将不起作用。您必须使用 @ViewChild('myDiv') myDiv: ElementRef;
我正在使用 Angular 7
我已将 angularjs 更改为 angular7，正如您评论它 -HTH ;)

标签： angular angular7 plotly server-side-rendering

【解决方案1】：

在 Angular 7 中试试这个

import {AfterViewInit, Component, ElementRef, ViewChild,Renderer2,OnInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  constructor(private renderer: Renderer2, private el: ElementRef) {}
  id='';
  ngOnInit() {
    this.id = this.el.nativeElement.getElementsByClassName('mydiv')[0];
     console.log(this.id);
  }
}

<p class="mydiv"> 
  Start editing to see some magic happen :)
</p>

【讨论】：