Angular 10 通用 | amcharts 4：为什么服务器会尝试加载图表？答案

【问题标题】：Angular 10 universal | amcharts 4 : Why the server tries to load the chart?Angular 10 通用 | amcharts 4：为什么服务器会尝试加载图表？
【发布时间】：2020-06-29 20:30:36
【问题描述】：

我习惯了 Angular，但我刚刚开始使用通用（用于 SEO）。

我想使用 amcharts 4 中的地图，如果没有 Angular Universal，我没有问题。我知道这是一个已知问题，但我不明白为什么在我的情况下服务器会尝试加载图表并创建此错误：

ERROR Error: Uncaught (in promise): ReferenceError: addEventListener is not defined
ReferenceError: addEventListener is not defined
...

我的代码：

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
  }

  ngOnInit(): void {
    this.setUpChart();
  }

  setUpChart() {
    if (isPlatformBrowser(PLATFORM_ID)) {
      let chart = am4core.create("world-map", am4maps.MapChart);
      // ...
    }
  }

【问题讨论】：

可能是在导入模块时调用了addEventListener代码，即使你没有实例化图表。这取决于库的编写方式
您可能需要用平台检查包装this.setUpChart()，以便仅在浏览器中运行时执行。

标签： angular typescript angular9 angular-universal amcharts4

【解决方案1】：

感谢David，我找到了问题所在。那里有两个：

isPlatformBrowser(PLATFORM_ID) => isPlatformBrowser(platformId): Object
该错误确实在库中，因此仅在我的情况之外发生。这是我现在的代码以避免这个问题：


declare var require: any;

@Component({...})
export class MapComponent implements OnInit, OnDestroy {

  private chart;
  isBrowser: boolean

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    this.isBrowser = isPlatformBrowser(platformId)
  }

  ngOnInit(): void {
    if (this.isBrowser) {
      this.setUpChart();
    }
  }


  setUpChart() {
    if (this.isBrowser) {

      const am4core = require("@amcharts/amcharts4/core");
      const am4maps = require("@amcharts/amcharts4/maps");

      let chart = am4core.create("world-map", am4maps.MapChart);
      // ...
    }
  }

【讨论】：