Angular集成ui-cropper库报错Unknown provider: uiCropperProvider <- uiCropper

这个错误Unknown provider: uiCropperProvider <- uiCropper本质是你的AngularJS模块没有正确引入ui-cropper的依赖模块，导致控制器找不到对应的服务。下面是具体的解决步骤：

1. 给你的模块添加uiCropper依赖 #

在定义widgets模块的时候，必须把uiCropper作为依赖项添加进去，这是AngularJS使用第三方模块的核心步骤。

修改你的模块定义代码：

// 原来的代码（缺少依赖）
angular.module('widgets')

// 修改后的代码（添加uiCropper依赖）
angular.module('widgets', ['uiCropper'])

如果你的widgets模块原本就有其他依赖，只需要把'uiCropper'追加到依赖数组里即可，比如：

angular.module('widgets', ['ngRoute', 'uiCropper'])

2. 确认脚本加载顺序正确 #

确保你的页面中脚本加载顺序是：

• 先加载AngularJS核心库（angular.js）
• 再加载ui-cropper的脚本（ui-cropper.js）
• 最后加载你的应用脚本（包含widgets模块和控制器的代码）

你可以打开浏览器开发者工具的网络面板，确认ui-cropper.js是否成功加载，没有404错误。

3. 验证控制器的注入（你当前这部分是正确的） #

你在控制器的$inject数组和函数参数里已经正确注入了uiCropper，这部分没问题，只要模块依赖添加正确，这部分就能正常工作。

额外检查点 #

• 确认已经正确安装了ui-cropper包：如果是通过npm安装的，执行npm install ui-cropper --save确保包已安装到项目中。
• 如果你使用的是构建工具（比如Webpack、Gulp），确认ui-cropper的脚本已经被打包到最终的输出文件中，或者在页面中正确引入了打包后的文件。

按照以上步骤修改后，这个注入错误应该就能解决啦！

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