Angular 10 通用 | amcharts 4 : 为什么服务器试图加载图表?

Question

我已经习惯了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);
// ...
}
}

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