Angular 12 SSR环境下add-to-calendar-button刷新报错求助

问题原因 #

customElements是浏览器专属API，服务端（Node.js环境）不存在这个对象。SSR模式下刷新页面时，服务端会尝试渲染组件，此时导入add-to-calendar-button会触发对customElements的调用，导致报错。

解决方案 #

仅在浏览器环境下加载该组件，避免服务端执行相关代码：

1. 修改组件代码，通过平台判断控制组件导入和显示：

import { Component, OnInit, Inject, PLATFORM_ID, AfterViewInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-single-event-details',
  templateUrl: './single-event-details.component.html',
  styleUrls: ['./single-event-details.component.css']
})
export class SingleEventDetailsComponent implements OnInit, AfterViewInit {
  showCal = false;
  // 你的其他变量定义...

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

  ngOnInit(): void {
    // 你的初始化逻辑
  }

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 仅在浏览器环境导入组件
      import('add-to-calendar-button');
      // 组件加载完成后再显示，避免DOM渲染异常
      this.showCal = true;
    }
  }
}

2. 保持模板和模块配置不变：

• 模板中的*ngIf="showCal"会确保服务端渲染时不输出<add-to-calendar-button>标签
• 模块中的CUSTOM_ELEMENTS_SCHEMA已经正确配置，无需修改

这样处理后，SSR服务端不会加载和渲染该组件，仅在浏览器端完成组件的导入和渲染，避免customElements is not defined错误。

内容的提问来源于stack exchange，提问作者GKC