问题描述
我已经习惯了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 :
-
isPlatformBrowser(PLATFORM_ID) =>
isPlatformBrowser(platformId):对象
该错误确实在库中,因此仅在我的状况之外发生.现在,这是我的代码,可以避免此问题:
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:为什么服务器尝试加载图表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!