Angular 16集成FullCalendar时出现Class constructor DayTableView cannot be invoked without 'new'错误的解决求助

大家好，我目前在使用Angular 16开发一个带事件管理的日历功能，选用了FullCalendar组件来实现。但按照官方文档的示例代码写完运行后，控制台抛出了这样的错误：

"vendor.js:97792 ERROR TypeError: Class constructor DayTableView cannot be invoked without 'new'"

我尝试在整个项目里全局搜索DayTableView这个类，但完全找不到它的踪影，实在搞不清楚问题出在哪，有没有大佬能帮忙分析解决一下？

我已经尝试过的方法： #

• 谷歌搜索相关错误，尝试修改tsconfig.json中的target配置项，但没有解决问题
• 重新安装FullCalendar相关依赖，问题依然存在

我的配置与代码： #

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "Node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "CommonJS",
    "allowSyntheticDefaultImports": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "useDefineForClassFields": false
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

组件HTML代码

<div class='demo-app'>
  <div class='demo-app-sidebar'>
    <div class='demo-app-sidebar-section'>
      <h2>Instructions</h2>
      <ul>
        <li>Select dates and you will be prompted to create a new event</li>
        <li>Drag, drop, and resize events</li>
        <li>Click an event to delete it</li>
      </ul>
    </div>
    <div class='demo-app-sidebar-section'>
      <label>
        <input
          type='checkbox'
          [checked]='calendarVisible'
          (change)='handleCalendarToggle()'
        />
        toggle whole calendar
      </label>
    </div>
    <div class='demo-app-sidebar-section'>
      <label>
        <input
          type='checkbox'
          [checked]='calendarOptions().weekends'
          (change)='handleWeekendsToggle()'
        />
        toggle weekends
      </label>
    </div>
    <div class='demo-app-sidebar-section'>
      <h2>All Events ({{currentEvents.length}})</h2>
      <ul>
        <li *ngFor='let event of currentEvents()'>
          <b>{{event.startStr}}</b>
          <i>{{event.title}}</i>
        </li>
      </ul>
    </div>
  </div>
  <div class='demo-app-main'>
    <full-calendar *ngIf='calendarVisible()' [options]='calendarOptions()'>
      <ng-template #eventContent let-arg>
        <b>{{ arg.timeText }}</b>
        <i>{{ arg.event.title }}</i>
      </ng-template>
    </full-calendar>
  </div>
</div>

组件TypeScript代码

import { Component, signal, ChangeDetectorRef } from '@angular/core';
import { CalendarOptions, DateSelectArg, EventClickArg, EventApi } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import { INITIAL_EVENTS, createEventId } from './event-utils';

@Component({
  selector: 'app-calender',
  templateUrl: './calender.component.html',
  styleUrls: ['./calender.component.css']
})
export class CalenderComponent {
  calendarVisible = signal(true);
  calendarOptions = signal<CalendarOptions>({
    plugins: [
      interactionPlugin,
      dayGridPlugin,
      timeGridPlugin,
      listPlugin,
    ],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialView: 'dayGridMonth',
    initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.handleEvents.bind(this)
    /* you can update a remote database when these fire:
    eventAdd:
    eventChange:
    eventRemove:
    */
  });
  currentEvents = signal<EventApi[]>([]);

  constructor(private changeDetector: ChangeDetectorRef) {
  }

  handleCalendarToggle() {
    this.calendarVisible.update((bool) => !bool);
  }

  handleWeekendsToggle() {
    this.calendarOptions.mutate((options) => {
      options.weekends = !options.weekends;
    });
  }

  handleDateSelect(selectInfo: DateSelectArg) {
    const title = prompt('Please enter a new title for your event');
    const calendarApi = selectInfo.view.calendar;
    calendarApi.unselect(); // clear date selection

    if (title) {
      calendarApi.addEvent({
        id: createEventId(),
        title,
        start: selectInfo.startStr,
        end: selectInfo.endStr,
        allDay: selectInfo.allDay
      });
    }
  }

  handleEventClick(clickInfo: EventClickArg) {
    if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
      clickInfo.event.remove();
    }
  }

  handleEvents(events: EventApi[]) {
    this.currentEvents.set(events);
    this.changeDetector.detectChanges(); // workaround for pressionChangedAfterItHasBeenCheckedError
  }
}

备注：内容来源于stack exchange，提问作者Raul