angular js неизвестный провайдер

148

Я пытаюсь "настроить" пример 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;
    }]);
  • 0
    Эта ошибка указывает на то, что angular не знает о фабрике продукта, убедитесь, что JS для этой службы в первую очередь является эталонным. Также при объявлении модулей убедитесь, что явно определены зависимости, потому что, когда файлы свернуты, эта ошибка также возникнет из-за искажения имени. Для получения дополнительной информации, посмотрите на эту статью :: ozkary.com/2015/11/…
Теги:

29 ответов

125
Лучший ответ

Ваш код выглядит хорошо, на самом деле он работает (помимо самих вызовов) при копировании и вставке в образец 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), поэтому я явно предвзято здесь.

Поделиться
  • 0
    У меня та же проблема, и это не решило мою проблему. Я на самом деле получаю данные обратно ... За исключением этого сообщения об ошибке вы думаете, что все работает просто отлично. Я не использую ng-app в элементе body, но я загружаюсь так: angular.element (document) .ready (function () {angular.bootstrap (document, ['reportServices']);});
  • 16
    Привет, ребята, это немного стыдно. У меня точно такая же проблема. Но я не могу определить разницу между двумя jsFiddles. Любая подсказка о том, где именно искать, очень ценится.
Показать ещё 4 комментария
35

Я получил эту ошибку, потому что я передавал неправильный параметр в определение factory. У меня было:

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

Он работал, когда я удалил $scope и изменил определение factory на:

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

Если вам нужно ввести $scope, используйте:

myModule.factory('myService', function($rootScope, $http)...
Поделиться
32

У меня была аналогичная проблема. Ошибка сказала то же самое в вопросе, попыталась решить его с ответом pkozlowski.opensource и Ben G, которые оба являются правильными и хорошими ответами.

Моя проблема была по-разному с той же ошибкой:

в моем HTML-коде. У меня была инициализация вроде этого...

<html ng-app>

Немного дальше, я попытался сделать что-то вроде этого:

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

Я избавился от первого... тогда это сработало... Очевидно, вы не можете инициализировать ng-приложение два или более раз. достаточно справедливо.

Я полностью забыл о первом "ng-приложении" и получил полное разочарование. Может быть, это поможет кому-то помочь...

Поделиться
  • 2
    У меня была похожая проблема, но в моем случае указание ng-controller в div было причиной для контроллера, который ссылается на сервис. Кажется, что Angular не знал, как разрешить службу, когда он анализировал представление.
25

Убедитесь, что ваш основной app.js включает службы, от которых это зависит. Например:

/* App Module */
angular.module('myApp', ['productServices']). 
.....
Поделиться
  • 1
    Если я не ошибаюсь, в таком случае productServices должен быть модулем, поэтому не имеет значения, что находится внутри такого модуля (услуги или нет).
17

pkozlowski ответ правильный, но на всякий случай это случается с кем-то другим, у меня была такая же ошибка после создания того же модуля дважды по ошибке; второе определение переопределяло провайдера первого:

Я создал модуль, выполнив

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

затем немного дальше в том же файле:

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

Правильный способ сделать это:

angular.module('MyService'...
).factory(...).value('version','0.1');
Поделиться
11

В моем случае я определил нового провайдера, скажем, xyz

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

Когда вы должны были сконфигурировать вышеперечисленного провайдера, вы должны ввести его с помощью Provider string added → xyz станет xyzProvider.

Пример:

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

Если вы введете вышеупомянутый провайдер без строки "Provider", вы получите аналогичную ошибку в OP.

Поделиться
7

В конце JS файла для закрытия функции factory у меня было

});

вместо

}());

Поделиться
4

Чтобы добавить свой собственный опыт здесь, я пытался внедрить услугу в одну из моих конфигурационных функций модуля. Этот абзац из документов, которые я в конце концов нашел, объясняет, почему это не работает:

Во время загрузки приложения перед Angular отключается создание всех служб, оно настраивает и создает экземпляры всех поставщиков. Мы называем это фазой конфигурации жизненного цикла приложения. На этом этапе службы недоступны, поскольку они еще не созданы.

Значение вы можете вводить поставщикам в функции module.config(...), но вы не можете вводить услуги, для этого вам нужно подождать до module.run(...) или выставить поставщика, который вы можете ввести to module.config

Поделиться
4

Это заняло слишком много времени, чтобы отследить. Удостоверьтесь, что вы minisafe ваш контроллер в пределах вашей директивы.

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

  return {

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

    }]
  }
}

Надеюсь, что поможет

Поделиться
4

Для меня эта ошибка была вызвана запуском мини-версии моего приложения angular. angular docs предлагают способ обойти это. Ниже приведена соответствующая цитата, описывающая проблему, и вы можете найти предлагаемое решение в самих документах здесь:

Примечание по вопросам минимизации Поскольку angular отображает зависимости контроллера от имен аргументов функции конструктора контроллера, если вы хотите минимизировать код JavaScript для контроллера PhoneListCtrl, все его аргументы функции также будут уменьшены, а инжектор зависимостей не сможет для правильной идентификации служб.

Поделиться
3

Так как это главный результат для "неопределенного провайдера angularjs" в Google прямо сейчас, здесь еще есть. При выполнении модульного тестирования с помощью Jasmine убедитесь, что у вас есть это утверждение в вашей функции beforeEach():

module('moduleName');

В противном случае вы получите эту же ошибку в своих тестах.

Поделиться
2

Еще один случай, когда эта ошибка произойдет, если вы являетесь сервисом, определенным в отдельном файле javascript, убедитесь, что вы ссылаетесь на него! Да, я знаю, ошибка новобранец.

Поделиться
1

В моем случае я использовал анонимную функцию в качестве обертки для модуля angular, например:

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

После закрытия круглой скобки я забыл вызвать анонимную функцию, открыв и закрыв круглые скобки снова, как указано выше.

Поделиться
1

Проблема для меня заключалась в том, что были некоторые новые файлы javascript, которые я создал, которые ссылались на службу, но Chrome видел только более старую версию. CTRL + F5 исправил это для меня.

Поделиться
1

Поскольку этот вопрос является верным результатом Google, я добавлю еще одну возможную вещь в список.

Если модуль, который вы используете, имеет сбой в оболочке инъекции зависимостей, он предоставит такой же результат. Например, модули копирования и вставки из Интернета могут полагаться на underscore.js и пытаться вставлять "_" в обертку di. Если подчеркивание не существует в ваших поставщиках зависимостей проекта, когда ваш контроллер пытается ссылаться на ваш модуль factory, он получит "неизвестный поставщик" для вашего factory в журнале консоли браузера.

Поделиться
1

Я забыл приложить файл, в котором мои службы вообще были. Не забудьте сделать это при инициализации вашего модуля приложения:

angular.module('myApp', ['myApp.services', ... ]);
Поделиться
1

Вот еще один возможный сценарий, где вы можете увидеть эту ошибку:

Если вы используете Sublime Text 2 и плагин angular, он будет генерировать заглушки, подобные этому

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

        }
    }
]);

обратите внимание на пустой '' как первый элемент массива после строки 'utilFactory'. Если у вас нет зависимостей, удалите это так:

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

        }
    }
]);
Поделиться
1

Для меня проблема была ленивая; Я загрузил мой контроллер и службу поздно, поэтому они не были доступны при загрузке страницы (и Angular инициализации). Я сделал это с тегом ui-if, но это не имеет значения. Решение заключалось в том, чтобы загрузить службу с загрузкой страницы уже.

Поделиться
0

Сегодня я столкнулся с подобной проблемой, и проблемы были действительно очень маленькими

 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);
            }
        }
    }
}
});
Поделиться
0

У меня была такая же проблема. Я исправил это, используя $('body').attr("ng-app", 'MyApp') вместо <body ng-app="MyApp"> для повышения.

Потому что я сделал

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

для требований к архитектуре.

Поделиться
0

Ни один из ответов выше не работал у меня, может быть, я делал совершенно неправильно, но как новичок, что мы делаем.

Я инициализировал контроллер в div, чтобы иметь список:

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

И затем используя $routeProvider, чтобы сопоставить URL-адрес с одним и тем же контроллером. Как только я удалил ng-init, контроллер работал с маршрутом.

Поделиться
0

Мой сценарий может быть немного неясным, но он может вызвать ту же ошибку, и кто-то может испытать это, поэтому:

При использовании службы $controller для создания нового контроллера (который ожидал "$ scope", поскольку он впервые ввел аргумент), я передавал новую локальную локацию контроллера в второй параметр функции $controller(). Это приводит к тому, что Angular пытается вызвать службу $scope, которая не существует (хотя на некоторое время я действительно думал, что мне удастся удалить службу $scope из кэша Angular). Решение состоит в том, чтобы обернуть локальную область в объекте locals:

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

// Good:
$controller('myController, {$scope: newScope});
Поделиться
0

Еще одна возможность.

У меня было unknown Provider <- <- nameOfMyService. Ошибка вызвана следующим синтаксисом:

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

Angular искал зависимость ''.

Поделиться
  • 0
    Ошибка: [$ injector: unpr] Неизвестный поставщик: LoginFactoryProvider <- LoginFactory У меня есть этот файл, так как я могу это исправить?
0

Моя проблема была с Йоменом, используя (заглавными):

yo angular:factory Test

Сделанные файлы (некапитализированные):

app/scripts/services/test.js

но файл index.html включен (с заглавной буквы):

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

Надеюсь, это поможет кому-то.

Поделиться
0

После обработки этой ошибки я также могу поддерживать этот список ответов в своем собственном случае.

В то же время простой и немой (возможно, не тупой для начинающих, как я, но да для экспертов), ссылка script на 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.

Надеюсь, это поможет любому!:)

Поделиться
0

В моем приложении Ruby on Rails я сделал следующее:

rake assets:precompile

Это было сделано в среде разработки, которая минимизировала Angular.js и включила ее в файл /public/assets/application.js.

Удаление файлов /public/assets/* решило проблему для меня.

Поделиться
0

При компиляции моего проекта с Grunt у меня возникла ошибка "неизвестного провайдера", связанная с angular -mocks (ngMockE2E). Проблема заключалась в том, что angular -mocks не может быть уменьшен, поэтому мне пришлось удалить его из списка мини файлов.

Поделиться
-1

Еще одна "gotcha": я получал эту ошибку, впрыскивая $timeout, и потребовалось несколько минут, чтобы понять, что у меня есть пробелы в значениях массива. Это не сработает:

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

Проводка на случай, если у какого-либо другого есть такая глупая ошибка.

Поделиться
-2

Мое дело было хитрое печатание

myApp.factory('Notify',funtion(){
Функция

имеет 'c'!

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню