AngularJS控制器注入toastr报错：Unknown provider: toastrProvider

云上老周

2026-5-19

解决AngularJS中toastr注入报错：Unknown provider: toastrProvider <- toastr <- clientController

这个报错我之前也碰到过，核心原因是Angular没法找到toastr的服务提供者，大概率是模块依赖没配置对，一步步来排查解决：

第一步：确保你的Angular应用模块依赖了angular-toastr
这是最常见的问题！你需要在定义自己的应用模块时，把angular-toastr加入到依赖数组里。比如：
```
// 正确的模块定义方式
var myApp = angular.module('yourAppName', ['angular-toastr']);
```
如果没加这个依赖，Angular根本不知道toastr服务的存在，自然会报找不到provider的错误。
第二步：检查脚本加载顺序是否正确
即使你引入了所有文件，如果顺序错了也会出问题。正确的加载顺序应该是：
1. Angular核心JS文件（比如angular.js）
2. angular-toastr的JS文件（如果用默认模板，用angular-toastr.tpls.js，否则用angular-toastr.js）
3. 你自己的控制器JS文件
  可以在浏览器的开发者工具→网络标签里，确认这些文件都成功加载，且顺序符合要求。
第三步：验证控制器的注入方式正确
确保你在控制器里正确注入了toastr，推荐用数组式注入避免代码压缩后出问题：
```
myApp.controller('clientController', ['$scope', 'toastr', function($scope, toastr) {
  // 现在可以正常使用toastr了
  toastr.success('通知加载成功！');
}]);
```
如果用简写的函数参数注入，也要确保参数名是toastr（注意大小写，这个组件的服务名是小写的）。
第四步：确认全局toastr对象存在
在浏览器控制台里直接输入toastr，如果能返回一个对象，说明基础的toastr库加载正常；如果返回undefined，那说明你的脚本路径写错了，或者文件没正确引入，检查一下文件路径是否和你项目的结构匹配。