AngularJS项目引入chart.js外部库失败：无法实例化模块问题求助

首先咱们理清核心问题：你安装的是原生Chart.js库，但AngularJS需要的是专门为它封装的angular-chart.js模块——这是导致AngularJS找不到chart.js模块的主要原因。另外，即便装对了包，你也没把库文件纳入项目的构建流程（因为用Grunt），AngularJS自然无法识别这个模块。

步骤1：替换为正确的AngularJS封装包 #

先卸载当前的原生Chart.js，安装适配AngularJS的专用版本：

npm uninstall chart.js --save
npm install angular-chart.js --save

这个包会自动安装适配版本的原生Chart.js作为依赖，无需手动单独安装。

步骤2：确保库文件被加载到项目中 #

因为你用Grunt构建，必须让AngularJS能找到angular-chart.js和它依赖的Chart.js文件，有两种实现方式：

• 手动引入（适合快速测试）：在index.html中按顺序添加script标签（必须先加载原生Chart.js，再加载Angular封装版）：

<script src="node_modules/chart.js/dist/chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

• Grunt构建配置（适合生产环境）：如果使用Grunt的concat、uglify等插件，把这两个文件加入构建脚本的文件列表中，确保它们被打包到最终输出的JS文件里，且顺序不能颠倒（原生Chart.js在前）。

步骤3：确认模块引用正确 #

你当前的模块引用代码是正确的，只要库文件加载成功，AngularJS就能识别chart.js模块：

angular
.module('myportal',['chart.js'])
.controller( 'PortalController', [ '$scope',function($scope){
    // 你的业务代码
}]);

关于npm安装警告的说明 #

你看到的fsevents相关警告完全可以忽略——这是MacOS平台专用的文件监听工具，Windows系统不需要，npm只是自动跳过了这个可选依赖，不会影响Chart.js或angular-chart.js的正常使用。

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