Angular5使用fullCalendar遇TS2305错误：模块无Options导出成员如何解决？

我来帮你搞定这个TypeScript错误！这个问题主要是因为你使用的ap-angular2-fullcalendar包和fullcalendar/fullcalendar-scheduler的版本不匹配，加上旧版fullcalendar的类型定义没有正确暴露Options接口导致的，下面给你几个可行的解决方案：

1. 快速绕过类型检查（适合紧急修复） #

既然TypeScript找不到Options类型，你可以直接把calendarOptions的类型声明为any，这样就能跳过类型检查，先让项目跑起来：

// home.component.ts
import { CalendarComponent } from 'ap-angular2-fullcalendar';
import * as $ from 'jquery';
import 'fullcalendar';
import 'fullcalendar-scheduler';

export class HomeComponent implements OnInit {
  // 把类型改成any
  calendarOptions: any = {
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      // ...你的其他配置
    }
  }
}

2. 自定义配置接口（更规范的做法） #

如果你不想用any，可以自己定义一个和你需要的配置项匹配的接口，这样既能保留类型提示，又不会依赖fullcalendar的类型定义：

// home.component.ts
import { CalendarComponent } from 'ap-angular2-fullcalendar';
import * as $ from 'jquery';
import 'fullcalendar';
import 'fullcalendar-scheduler';

// 自定义接口，根据你的实际配置添加字段
interface CalendarOptions {
  defaultView?: string;
  header?: {
    left?: string;
    center?: string;
    right?: string;
  };
  // 比如你用到的其他配置，比如editable、events等都可以加进来
}

export class HomeComponent implements OnInit {
  calendarOptions: CalendarOptions = {
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      // ...你的其他配置
    }
  }
}

3. 匹配依赖版本并修复类型定义 #

因为你用的是Angular 5，属于比较旧的版本，ap-angular2-fullcalendar对应的是fullcalendar v3.x版本，而不是v4+（v4之后fullcalendar架构大改，和这个封装包不兼容）。你需要确保所有依赖版本匹配：

• 先卸载现有可能不兼容的包：

  npm uninstall fullcalendar fullcalendar-scheduler @types/fullcalendar
  

• 安装匹配的旧版本：

  npm install fullcalendar@3.10.2 fullcalendar-scheduler@1.9.4 --save
  npm install @types/fullcalendar@3.10.7 --save-dev
  

• 然后在tsconfig.json里添加fullcalendar的类型：

  {
    "compilerOptions": {
      "types": [
        "jquery",
        "fullcalendar"
      ]
    }
  }
  

• 最后在组件里正确导入类型（注意v3的fullcalendar类型里Options在命名空间下）：

  import * as fullcalendar from 'fullcalendar';
  
  export class HomeComponent implements OnInit {
    calendarOptions: fullcalendar.Options = {
      // ...你的配置
    }
  }
  

4. 保持正确的导入顺序 #

确保你的导入顺序是对的，因为fullcalendar-scheduler依赖fullcalendar，所以必须先导入jquery，再fullcalendar，最后scheduler，你现在的导入顺序是正确的，继续保持就好。

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