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

Question

我已经习惯了Angular，但我才刚刚开始使用 universal（用于 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);
      // ...
    }
  }

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

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

Angular 10 universal | amcharts 4 : Why the server tries to load the chart?

typescript

angular-universal

angular

amcharts4

angular9