Angular 1.6集成flatpickr报ReferenceError: Flatpickr未定义问题

看起来你遇到的是flatpickr全局变量未被正确加载的问题，结合你用Webjars管理依赖的场景，我帮你梳理几个关键排查点：

1. 确认pom.xml里的Webjars依赖完整且版本兼容 #

Angular-flatpickr依赖flatpickr核心库，所以两个都要加到pom里，而且要选互相兼容的版本（比如angular-flatpickr 3.x对应flatpickr 4.x，避免用flatpickr 5+，因为它默认用ES模块，不太适配Angular 1.6的全局加载方式）：

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>flatpickr</artifactId>
    <version>4.6.13</version> <!-- 稳定的全局变量版本 -->
</dependency>
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-flatpickr</artifactId>
    <version>3.2.1</version> <!-- 和flatpickr 4.x兼容 -->
</dependency>

2. 严格控制index.html里的脚本加载顺序 #

这是最容易踩坑的点！必须先加载flatpickr核心JS，再加载angular-flatpickr，最后加载你的应用代码，因为angular-flatpickr会直接引用全局的Flatpickr变量：

<!-- 加载flatpickr核心 -->
<script src="/webjars/flatpickr/dist/flatpickr.min.js"></script>
<!-- 加载angular-flatpickr组件 -->
<script src="/webjars/angular-flatpickr/dist/angular-flatpickr.min.js"></script>
<!-- 最后加载你的Angular应用脚本 -->
<script src="app.js"></script>

另外可以验证Webjars路径是否正确：启动应用后，直接在浏览器访问/webjars/flatpickr/dist/flatpickr.min.js，如果能看到JS内容，说明路径没问题；如果404，检查Webjars的配置或者版本号是否正确。

3. 确保Angular模块正确注入依赖 #

你的Angular应用模块必须把angular-flatpickr作为依赖注入，否则指令无法被识别：

// app.js里的模块定义
angular.module('yourAppName', ['angular-flatpickr'])
  .controller('YourController', function($scope) {
    // 配置flatpickr选项
    $scope.flatpickrOptions = {
      dateFormat: 'Y-m-d',
      onChange: function(selectedDates, dateStr) {
        $scope.selectedDate = dateStr;
        $scope.$apply(); // 注意：回调里修改scope变量需要手动触发脏检查
      }
    };
  });

这里额外提一句：flatpickr的回调函数是在Angular的digest cycle之外执行的，所以修改$scope变量后要调用$scope.$apply()，否则页面不会实时更新。

4. 调试全局变量是否存在 #

如果上面几步都做了还是报错，可以在flatpickr脚本之后加一段调试代码，确认全局Flatpickr是否存在：

<script src="/webjars/flatpickr/dist/flatpickr.min.js"></script>
<script>
  // 控制台打印，检查Flatpickr是否加载成功
  console.log('Flatpickr global variable:', window.Flatpickr);
</script>
<script src="/webjars/angular-flatpickr/dist/angular-flatpickr.min.js"></script>

如果控制台输出undefined，说明flatpickr的版本可能不对（比如用了5.x的ES模块版本），换回4.x的版本即可。

最后检查页面指令的使用 #

确保HTML里的ng-flatpickr指令绑定正确：

<div ng-app="yourAppName" ng-controller="YourController">
  <input type="text" ng-flatpickr="flatpickrOptions" ng-model="selectedDate" placeholder="选择日期">
</div>

按这个顺序排查下来，应该能解决ReferenceError: Flatpickr is not defined的问题啦！

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