添加resourceTimeGridPlugin后遇FullCalendar插件导入顺序错误

嘿，我之前也踩过这个坑！这个错误的核心原因很简单：resourceTimeGridPlugin依赖的核心FullCalendar库没在插件之前被加载，按照下面的步骤调整就能搞定：

1. 先确认依赖都装全了 #

resourceTimeGridPlugin需要依赖@fullcalendar/core和@fullcalendar/resource这两个包，先检查你的项目里有没有装，如果没装，跑下面的命令安装：

npm install @fullcalendar/core @fullcalendar/resource

2. 调整导入顺序，核心在前插件在后 #

把核心相关的导入放在所有插件的前面，修改你的代码成这样：

// 先导入Angular的FullCalendar组件
import { FullCalendarComponent } from '@fullcalendar/angular';
// 先引入核心库，确保插件加载前核心已经就绪
import '@fullcalendar/core';
// 再依次导入各个插件，顺序无所谓，但核心必须在最前面
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';

3. 检查模块配置有没有漏 #

确保你在使用FullCalendar的那个Angular模块里，已经导入了FullCalendarModule，比如在AppModule或者你的业务模块里：

import { FullCalendarModule } from '@fullcalendar/angular';

@NgModule({
  imports: [
    // ...其他你需要的模块
    FullCalendarModule
  ]
})
export class YourModule { }

要是还不行？试试清缓存 #

有时候缓存会搞事情，试试清理npm和Angular的构建缓存：

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

这样调整之后，那个“请先导入顶层fullcalendar库”的错误就应该消失啦！

内容的提问来源于stack exchange，提问作者Mhmd Backer Shehadi