angularjs - Angular js未知提供者

Question

我正在尝试“自定义” mongolab 示例以适合我自己的 REST API。现在我遇到了这个错误，我不确定我做错了什么：

Error: Unknown provider: ProductProvider <- Product
    at Error (unknown source)
    at http://localhost:3000/js/vendor/angular.min.js:28:395
    at Object.c [as get] (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at http://localhost:3000/js/vendor/angular.min.js:28:476
    at c (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at d (http://localhost:3000/js/vendor/angular.min.js:26:314)

这是我的控制器：

function ProductListCtrl($scope, Product) {
  $scope.products = Product.query();
}

这是模块：

angular.module('productServices', ['ngResource']).
    factory('Product', ['$resource', function($resource){
      var Product = $resource('/api/products/:id', {  }, {
        update: { method: 'PUT' }
      });

      return Product;
    }]);

score 130 · Accepted Answer

您的代码看起来不错，实际上它在复制并粘贴到示例 jsFiddle 中时有效（除了调用本身）：http: //jsfiddle.net/VGaWD/

如果没有看到更完整的示例，很难说发生了什么，但我希望上面的 jsFiddle 会有所帮助。我怀疑的是您没有使用“productServices”模块初始化您的应用程序。它会给出同样的错误，我们可以在另一个 jsFiddle 中看到：http: //jsfiddle.net/a69nX/1/

如果您打算使用 AngularJS 和 MongoLab，我建议您为 $resource 和 MongoLab 使用现有适配器：https ://github.com/pkozlowski-opensource/angularjs-mongolab 它减轻了使用 MongoLab 的大部分痛苦，您可以在这里看到它的实际效果：http: //jsfiddle.net/pkozlowski_opensource/DP4Rh/ 免责声明！我正在维护这个适配器（基于 AngularJS 示例编写）所以我在这里显然有偏见。

score 40 · Accepted Answer

我收到了这个错误，因为我向工厂定义传递了一个不正确的参数。我有：

myModule.factory('myService', function($scope, $http)...

当我删除$scope并将工厂定义更改为：

myModule.factory('myService', function( $http)...

如果您需要注入$scope，请使用：

myModule.factory('myService', function($rootScope, $http)...

score 32 · Accepted Answer

我只是有一个类似的问题。错误在问题中说的一样，试图用pkozlowski.opensource和Ben G的答案来解决它，这两个都是正确和好的答案。

我的问题确实与相同的错误不同：

在我的 HTML 代码中，我有这样的初始化......

<html ng-app>

再往下一点，我试图做这样的事情：

<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">

我摆脱了第一个......然后它起作用了......显然你不能初始化 ng-app 两次或更多次。很公平。

我完全忘记了第一个“ng-app”并感到非常沮丧。也许有一天这会帮助某人......

score 27 · Accepted Answer

确保您的 mainapp.js包含它所依赖的服务。例如：

/* App Module */
angular.module('myApp', ['productServices']). 
.....

score 18 · Accepted Answer

pkozlowski 的回答是正确的，但以防万一这发生在其他人身上，我在错误地创建了两次相同的模块后遇到了同样的错误；第二个定义覆盖了第一个的提供者：

我通过做创建了模块

angular.module('MyService'...
).factory(...);

然后在同一个文件中再往下一点：

angular.module('MyService'...
).value('version','0.1');

这样做的正确方法是：

angular.module('MyService'...
).factory(...).value('version','0.1');

score 12 · Accepted Answer

就我而言，我定义了一个新的提供者，比如说，xyz

angular.module('test')
.provider('xyz', function () {
    ....
});

当您要配置上述提供程序时，您必须将其注入并Provider附加字符串 --> xyz变为xyzProvider。

前任：

angular.module('App', ['test'])
.config(function (xyzProvider) {
     // do something with xyzProvider....
});

如果您在没有 'Provider' 字符串的情况下注入上述提供程序，您将在 OP 中得到类似的错误。

score 8 · Accepted Answer

8

在 JS 文件的末尾关闭我的工厂功能

});

代替

}());

于 2016-06-01T17:41:20.330 回答

score 5 · Accepted Answer

这花了我太长时间才能找到。确保在指令中对控制器进行 minisafe。

.directive('my_directive', ['injected_item', function (injected_item){

  return {

    controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO){

    }]
  }
}

希望有帮助

score 5 · Accepted Answer

为了在这里添加我自己的经验，我试图将服务注入我的模块配置函数之一。我最终找到的文档中的这一段解释了为什么这不起作用：

在应用程序引导期间，在 Angular 开始创建所有服务之前，它会配置并实例化所有提供程序。我们将此称为应用程序生命周期的配置阶段。在此阶段，服务无法访问，因为它们尚未创建。

这意味着您可以将提供程序注入到 module.config(...) 函数中，但不能注入服务，因为您需要等到 module.run(...)，或者公开可以注入模块的提供程序。配置

score 4 · Accepted Answer

对我来说，这个错误是由运行我的 Angular 应用程序的缩小版本引起的。Angular 文档提出了一种解决此问题的方法。这是描述该问题的相关引用，您可以在此处的文档中找到建议的解决方案：

关于缩小的注意事项由于 Angular 从参数名称推断控制器的依赖关系到控制器的构造函数，如果你要缩小 PhoneListCtrl 控制器的 JavaScript 代码，它的所有函数参数也会被缩小，并且依赖注入器不会能够正确识别服务。

score 3 · Accepted Answer

由于这是目前 Google 上“angularjs unknown provider”的最高结果，这里还有另一个问题。使用 Jasmine 进行单元测试时，请确保您的beforeEach()函数中有以下语句：

module('moduleName');

否则，您将在测试中遇到同样的错误。

score 3 · Accepted Answer

还有一种会发生此错误的情况，如果您的服务是在单独的 javascript 文件中定义的，请确保您引用它！是的，我知道，菜鸟的错误。

score 2 · Accepted Answer

我忘记注入完全保存我的服务的文件。请记住在初始化应用程序模块时执行此操作：

angular.module('myApp', ['myApp.services', ... ]);

score 2 · Accepted Answer

就我而言，我使用匿名函数作为 angular 模块的包装器，如下所示：

(function () {
var app = angular.module('myModule', []);
...
})();

关闭括号后，我忘记通过如上所述再次打开和关闭括号来调用匿名函数。

score 1 · Accepted Answer

对我来说，问题是延迟加载；我加载控制器和服务较晚，因此它们在页面加载（和 Angular 初始化）时不可用。我用 ui-if 标签做到了这一点，但这无关紧要。解决方案是在已经加载页面的情况下加载服务。

score 1 · Accepted Answer

这是您可以看到此错误的另一种可能情况：

如果您使用 Sublime Text 2 和 angular 插件，它将生成像这样的存根

angular.module('utils', [])
.factory('utilFactory', [''
    function() {
        return {

        }
    }
]);

注意空的 ' ' 作为 'utilFactory' 字符串之后的数组的第一个元素。如果您没有任何依赖项，请将其删除，如下所示：

angular.module('utils', [])
.factory('utilFactory', [
    function() {
        return {

        }
    }
]);

score 1 · Accepted Answer

由于这个问题是谷歌搜索结果，我将在列表中添加另一个可能的问题。

如果您使用的模块在依赖注入包装器上出现故障，它将提供相同的结果。例如，来自互联网的复制和粘贴模块可能依赖 underscore.js 并尝试在 di 包装器中注入 '_'。如果您的项目依赖提供程序中不存在下划线，当您的控制器尝试引用您模块的工厂时，它将在浏览器的控制台日志中为您的工厂获取“未知提供程序”。

score 1 · Accepted Answer

对我来说，问题是我创建了一些引用该服务的新 javascript 文件，但 Chrome 只看到旧版本。A CTRL + F5 为我修复了它。

score 0 · Accepted Answer

使用 Grunt 编译我的项目时，出现与 angular-mocks (ngMockE2E) 相关的“未知提供者”错误。问题是 angular-mocks 不能被缩小，所以我不得不从缩小文件列表中删除它。

score 0 · Accepted Answer

在我的 Ruby on Rails 应用程序中，我执行了以下操作：

rake assets:precompile

这是在“开发”环境中完成的，该环境已缩小 Angular.js 并将其包含在/public/assets/application.js文件中。

删除/public/assets/*文件为我解决了这个问题。

score 0 · Accepted Answer

在也处理了这个错误之后，我可以用我自己的案例来支持这个答案列表。

它既简单又笨拙（对于像我这样的初学者来说可能不笨，但对于专家来说是的），对 angular.min.js 的脚本引用必须是 html 页面中脚本列表中的第一个。

这有效：

<script src="Scripts/angular.min.js"></script>
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>

这不是：

<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
<script src="Scripts/angular.min.js"></script>

注意 angular.min.js。

希望它可以帮助任何人！:)

score 0 · Accepted Answer

我的问题是 Yeoman，使用（大写）：

yo angular:factory Test

制作文件（未大写）：

app/scripts/services/test.js

但 index.html 文件包括（大写）：

<script src="scripts/services/Test.js"></script>

希望这可以帮助某人。

score 0 · Accepted Answer

还有另一种可能。

我有unknown Provider <- <- nameOfMyService。该错误是由以下语法引起的：

module.factory(['', function() { ... }]);

Angular 正在寻找''依赖项。

score 0 · Accepted Answer

我的场景可能有点晦涩难懂，但它可能会导致相同的错误，并且有人可能会遇到它，所以：

当使用 $controller 服务来实例化一个新控制器时（它期望 '$scope' 作为它的第一个注入参数），我将新控制器的本地范围传递给 $controller() 函数的第二个参数。这导致 Angular 试图调用一个不存在的 $scope 服务（虽然，有一段时间，我实际上认为我会从 Angular 的缓存中删除 '$scope' 服务）。解决方案是将本地范围包装在 locals 对象中：

// Bad:
$controller('myController', newScope);

// Good:
$controller('myController, {$scope: newScope});

score 0 · Accepted Answer

上面的答案都不适合我，也许我做错了，但作为初学者，这就是我们所做的。

div为了得到一个列表，我正在初始化控制器：

 <div ng-controller="CategoryController" ng-init="initialize()">

然后使用$routeProvider将 URL 映射到同一个控制器。一旦我移除ng-init控制器，控制器就会与路线一起工作。

score 0 · Accepted Answer

我有同样的问题。我修复了使用$('body').attr("ng-app", 'MyApp')而不是<body ng-app="MyApp">boostrap 的问题。

因为我做到了

angular.element(document).ready(function () {        
    angular.bootstrap(document, [App.Config.Settings.AppName]);
})

用于架构要求。

score 0 · Accepted Answer

我今天遇到了类似的问题，问题真的很小

 app.directive('removeFriend', function($scope) {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

如果你观察上面的代码块，你会在第一行看到我错误地注入了 $scope，这是不正确的。我删除了不需要的依赖来解决问题。

 app.directive('removeFriend', function() {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

score 0 · Accepted Answer

创建新工厂并在组件中使用它后出现此错误，但我没有检查该组件的规格

因此，如果您的（规格）测试文件失败

你需要添加 beforeEach(module('YouNewServiceModule'));

score -1 · Accepted Answer

另一个“陷阱”：我在注入 $timeout 时遇到了这个错误，我花了几分钟才意识到我在数组值中有空格。这将不起作用：

angular.module('myapp',[].
  controller('myCtrl', ['$scope', '$timeout ', 
    function ($scope, $timeout){
      //controller logic
    }
  ]);

发布以防万一其他人有这样的愚蠢错误。

score -2 · Accepted Answer

-2

我的案子是狡猾的打字

myApp.factory('Notify',funtion(){

函数有一个'c'！

于 2014-01-28T15:49:02.430 回答

angularjs - Angular js未知提供者

30 回答 30

Related

Reference