angular - Angular 10 通用 | amcharts 4:为什么服务器会尝试加载图表?
问题描述
我习惯了 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);
// ...
}
}
解决方案
感谢大卫,我发现了问题。那里有两个:
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);
// ...
}
}
推荐阅读
- ionic3 - 为什么我的切换输入 UI 没有正确更新?
- android - 为 FloatingActionsBar 添加长按事件的最佳方法是什么?
- javascript - 有什么方法可以防止有人使用 javascript 从 CKEDITOR 复制文本?
- python - 单独文件中的 Python 类 AttributeError
- rust - 从 Rust 库返回指向对象的指针以供以后重用?
- rmi - 当我修改 JMX 端口设置时,SMBJ 不再工作
- mysql - AWS Glue 为目标连接禁用 sslmode
- go - 如何检查errors.Errorf()中的类型错误?
- postgresql - 从 pg_dump 中排除序列
- amazon-web-services - 无法将文件上传到 Amazon Glacier