Angular 10 通用 |amcharts 4:为什么服务器会尝试加载图表? [英] Angular 10 universal | amcharts 4 : Why the server tries to load the chart?

问题描述

我已经习惯了 Angular，但我才刚刚开始使用通用的(用于 SEO).

I am used to Angular but I am just starting to use universal (for SEO).

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

I want to use a map from amcharts 4, I have no problems using without Angular Universal. I know that it is a known issue but I do not understand why in my case the server tries to load the chart and create this error:

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);
      // ...
    }
  }

推荐答案

感谢 David，我发现了问题.那里有两个:

Thanks to David, I found the problems. There where two :

1. isPlatformBrowser(PLATFORM_ID) =>isPlatformBrowser(platformId): Object

错误确实在库中，所以它只发生在我的情况之外.这是我现在的代码来避免这个问题:

The error was indeed in the library so it was occured only outside my condition. This my code now to avoid this problem :

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);
      // ...
    }
  }

这篇关于Angular 10 通用 |amcharts 4:为什么服务器会尝试加载图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！