angular-calendar视图切换指令报错：subFn is not a function

这个错误的核心原因几乎都是date-fns版本不兼容导致的——angular-calendar 0.23.2依赖的是date-fns 1.x版本，如果你安装了date-fns 2.x+，就会出现函数无法识别的问题：date-fns 2.x重构了API，日期操作函数的导出和调用逻辑完全改变，旧版本的angular-calendar无法适配。

下面是分步解决方案：

1. 降级date-fns到兼容版本 #

先卸载当前的date-fns，安装angular-calendar 0.23.x官方推荐的1.x稳定版本：

npm uninstall date-fns
npm install date-fns@1.30.1 --save

这个版本能完美匹配angular-calendar 0.23.2的日期操作逻辑，是解决该报错的最直接方案。

2. 验证模板中的指令绑定是否正确 #

确保你在模板中正确绑定了view和viewDate属性，这两个是指令正常工作的必要前提：

<!-- 示例模板代码 -->
<div class="calendar-controls">
  <button mwlCalendarPreviousView
          [(view)]="calendarView"
          [(viewDate)]="calendarDate">
    ← 上一页
  </button>
  <button mwlCalendarNextView
          [(view)]="calendarView"
          [(viewDate)]="calendarDate">
    下一页 →
  </button>
</div>

<mwl-calendar
  [view]="calendarView"
  [viewDate]="calendarDate"
  [events]="calendarEvents">
</mwl-calendar>

注意两个关键变量的要求：

• calendarView必须是字符串类型，可选值为'month'、'week'或'day'
• calendarDate必须是合法的Date对象，不能传入字符串或其他类型

3. 排查其他依赖版本冲突 #

如果前两步没解决问题，检查Angular相关依赖的兼容性：

• Angular 5.0.0对应的rxjs版本应为5.5.10左右，若你的rxjs版本过高（比如6.x+）会引发依赖冲突。可以通过npm list rxjs查看版本，必要时降级：

npm install rxjs@5.5.10 --save
npm install rxjs-compat@5.5.10 --save # 若项目中有兼容rxjs 6的代码需要保留

4. 清理缓存并重新构建 #

有时候node_modules的缓存会导致奇怪的依赖问题，执行以下命令清理后重新安装依赖：

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

按照这些步骤操作后，mwlCalendarPreviousView和mwlCalendarNextView指令应该就能正常触发视图切换了。

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