Angular 10個通用| amcharts 4：為什么服務器會嘗試加載圖表？

Question

我習慣了 Angular 但我剛剛開始使用通用（用於 SEO）。

我想使用 amcharts 4 中的 map，在沒有 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

感謝大衛，我發現了問題。 那里有兩個：

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

2. 該錯誤確實在圖書館中，因此僅在我的情況之外發生。 這是我現在的代碼以避免這個問題：

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