Angular 16中为FullCalendar v6引入Bootstrap5主题失败求助

尝试为FullCalendar v6引入Bootstrap5主题，已遵循官方指南操作，但运行网站时仍报错，错误截图如下：

附上Angular组件源码：

import { Component } from '@angular/core';
import { CalendarOptions, EventInput, EventContentArg } from '@fullcalendar/core'; 
import timeGridPlugin from '@fullcalendar/timegrid';
import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'; // needs additional webpack config!
@Component({
  selector: 'app-weekly-schedule',
  templateUrl: './weekly-schedule.component.html',
  styleUrls: ['./weekly-schedule.component.css']
})
export class WeeklyScheduleComponent {
  calendarOptions: CalendarOptions = {
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin,bootstrap5Plugin],
    themeSystem: 'bootstrap5',
    initialView: 'timeGridWeek',  
    weekends: false,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay',
    },
    slotMinTime: '08:00',
    slotMaxTime: '18:00',
    allDaySlot: false,
    slotEventOverlap: false,
    height: 850,
    aspectRatio:0.8,
    expandRows:true,
    handleWindowResize:true,
    events: this.mockEvents(),
    eventContent: this.customEventContent.bind(this), // Custom function to render event content
    slotLabelFormat: { hour: 'numeric', minute: '2-digit' }, // Display time for each slot
  };
  private mockEvents(): EventInput[] {
    return [
      {
        start: '2024-01-29T10:00:00',
        end: '2024-01-29T11:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      {
        start: '2024-01-30T14:00:00',
        end: '2024-01-30T15:00:00',
        name: 'Jane Doe',
        employeeId: '67890',
      },
      {
        start: '2024-01-31T12:00:00',
        end: '2024-01-31T12:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      {
        start: '2024-01-31T12:30:00',
        end: '2024-01-31T13:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      {
        start: '2024-02-02T12:00:00',
        end: '2024-02-02T12:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      // Add more mock events as needed
    ];
  }
  private customEventContent(arg: EventContentArg) {
    const eventInfo = arg.event.extendedProps;
    const details =
        '<div class="event-details" style="font-size: 14px; height: 100%; overflow: auto;">' +
        '<div>Name: ' + eventInfo['name'] + '</div>' +
        '<div>Employee ID: ' + eventInfo['employeeId'] + '</div>' +
        '<div>Time: ' + arg.timeText + '</div>' +
        '</div>';
    return { html: details };
}
}

需求：成功导入Bootstrap5主题并正常运行网站。

1. 确认依赖版本匹配 #

FullCalendar的Bootstrap5插件要求Bootstrap版本为5.x，且@fullcalendar/bootstrap5与@fullcalendar/core必须同为v6.x版本。执行命令检查版本：

npm list @fullcalendar/core @fullcalendar/bootstrap5 bootstrap

若版本不匹配，重新安装对应版本：

npm install @fullcalendar/core@^6 @fullcalendar/bootstrap5@^6 bootstrap@^5

2. 全局导入Bootstrap样式 #

Angular环境下，将Bootstrap CSS全局导入到项目根目录的styles.scss（或styles.css）中，避免组件样式隔离问题：

// src/styles.scss
@import "bootstrap/dist/css/bootstrap.css";
@import "bootstrap-icons/font/bootstrap-icons.css";

同时删除组件内的以下两行导入代码：

// import 'bootstrap/dist/css/bootstrap.css';
// import 'bootstrap-icons/font/bootstrap-icons.css';

3. 配置Bootstrap Icons资源路径 #

若控制台提示Bootstrap Icons加载失败，修改angular.json中的资源配置：
找到projects -> [你的项目名] -> architect -> build -> options -> assets，添加：

{
  "glob": "**/*",
  "input": "./node_modules/bootstrap-icons/font",
  "output": "/bootstrap-icons/font/"
}

4. 检查组件模板的FullCalendar标签 #

确保weekly-schedule.component.html中正确使用Angular封装的FullCalendar组件：

<full-calendar [options]="calendarOptions"></full-calendar>

5. 清理缓存并重启服务 #

执行以下命令清除缓存，避免旧资源干扰：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng serve --open

6. 修复自定义事件内容的HTML格式 #

当前customEventContent中的转义字符会导致渲染异常，直接使用模板字符串编写HTML：

private customEventContent(arg: EventContentArg) {
  const eventInfo = arg.event.extendedProps;
  const details = `
    <div class="event-details" style="font-size: 14px; height: 100%; overflow: auto;">
      <div>Name: ${eventInfo['name']}</div>
      <div>Employee ID: ${eventInfo['employeeId']}</div>
      <div>Time: ${arg.timeText}</div>
    </div>
  `;
  return { html: details };
}

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