provedor desconhecido js angular

Eu estou tentando “personalizar” o exemplo mongolab para caber minha própria API REST. Agora estou correndo para esse erro e não tenho certeza do que estou fazendo de errado:

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) 

Este é meu controlador:

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

e este é o módulo:

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

Seu código parece bom, na verdade funciona (além das próprias chamadas) quando copiado e colado em um jsFiddle de exemplo: http://jsfiddle.net/VGaWD/

Difícil dizer o que está acontecendo sem ver um exemplo mais completo, mas espero que o jsFiddle acima seja útil. O que eu suspeito é que você não está inicializando seu aplicativo com o módulo ‘productServices’ . Isso daria o mesmo erro, podemos ver isso em outro jsFiddle: http://jsfiddle.net/a69nX/1/

Se você planeja trabalhar com o AngularJS e o MongoLab , sugiro usar um adaptador existente para o $ resource e o MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab Ele facilita muito o trabalho com o MongoLab, você pode vê-lo em ação aqui: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Disclaimer! Eu estou mantendo este adaptador (escrito com base nos exemplos do AngularJS), então estou obviamente inclinado aqui.

Eu recebi esse erro porque estava passando um parâmetro incorreto para a definição de fábrica. Eu tinha:

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

Funcionou quando removi o $scope e alterei a definição de fábrica para:

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

Caso você precise injetar $scope , use:

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

Eu só tive um problema semelhante. O erro disse o mesmo da questão, tentou resolvê-lo com a resposta de pkozlowski.opensource e Ben G, que ambos estão corretos e boas respostas.

Meu problema era realmente diferente com o mesmo erro:

no meu código HTML eu tive a boot assim …

  

Um pouco mais abaixo eu tentei fazer algo assim:

 

Eu me livrei do primeiro … então funcionou … obviamente você não pode inicializar o ng-app duas ou mais vezes. justo.

Eu esqueci completamente o primeiro “ng-app” e fiquei totalmente frustrado. Talvez isso ajude alguém a um dia …

Certifique-se de que seu app.js principal.js inclua os serviços dos quais ele depende. Por exemplo:

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

A resposta de pkozlowski está correta, mas caso isso aconteça com outra pessoa, eu tive o mesmo erro depois de criar o mesmo módulo duas vezes por engano; a segunda definição estava sobrepujando o provedor do primeiro:

Eu criei o módulo fazendo

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

então um pouco mais abaixo no mesmo arquivo:

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

A maneira correta de fazer isso é:

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

No meu caso, eu defini um novo provedor, digamos, xyz

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

Quando você configura o provedor acima, você deve injetá-lo com a string Provider anexada -> xyz torna-se xyzProvider .

Ex:

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

Se você injetar o provedor acima sem a string ‘Provider’, receberá o erro semelhante no OP.

No final do arquivo JS para fechar a function de fábrica eu tinha

});

ao invés de

}());

Para adicionar minha própria experiência aqui, eu estava tentando injetar um serviço em uma das minhas funções de configuração do módulo. Este parágrafo dos documentos que acabei encontrando explica por que isso não funciona:

Durante o bootstrap do aplicativo, antes de o Angular desativar a criação de todos os serviços, ele configura e instancia todos os provedores. Chamamos isso de fase de configuração do ciclo de vida do aplicativo. Durante esta fase, os serviços não são acessíveis porque ainda não foram criados.

Isso significa que você pode injetar provedores em funções module.config (…), mas você não pode injetar serviços, para isso você precisa esperar até module.run (…), ou expor um provedor que você pode injetar no módulo. config

Para mim, esse erro foi causado pela execução da versão reduzida do meu aplicativo angular. Documentos angulares sugerem uma maneira de contornar isso. Aqui está a citação relevante descrevendo o problema, e você pode encontrar a solução sugerida nos próprios documentos aqui :

Uma Nota sobre Minificação Como Angular infere as dependencies do controlador dos nomes dos argumentos para a function construtora do controlador, se você fosse diminuir o código JavaScript para o controlador PhoneListCtrl, todos os seus argumentos de function também seriam diminuídos eo injetor de dependência não seria ser capaz de identificar os serviços corretamente.

Isso me levou muito tempo para rastrear. Certifique-se de minisafe seu controlador dentro de sua diretiva.

 .directive('my_directive', ['injected_item', function (injected_item){ return { controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO){ }] } } 

espero que ajude

Como esse é o principal resultado de “provedor desconhecido angularjs” no Google agora, aqui está outra pegadinha. Ao fazer testes unitários com o Jasmine, certifique-se de ter esta declaração em sua function beforeEach() :

 module('moduleName'); 

Caso contrário, você receberá este mesmo erro nos seus testes.

No entanto, outro caso em que esse erro ocorrerá, se o serviço for definido em um arquivo javascript separado, certifique-se de fazer referência a ele! Sim, eu sei, erro de novato.

Para mim, o problema era o carregamento lento; Carreguei meu controlador e meu serviço com atraso, para que eles não estivessem disponíveis no carregamento da página (e na boot angular). Eu fiz isso com uma tag ui-if, mas isso é irrelevante. A solução foi carregar o serviço com o carregamento da página já.

Veja outro cenário possível em que você pode ver esse erro:

Se você usar o Sublime Text 2 e o plug-in angular, ele gerará stubs como este

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

observe o vazio ” como o primeiro elemento da matriz após a string ‘utilFactory’. Se você não tiver nenhuma dependência, remova-a para que fique assim:

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

Eu estava esquecendo de injetar o arquivo que mantinha meus serviços completamente. Lembre-se de fazer isso ao inicializar seu módulo de aplicativo:

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

Como essa questão é o resultado do google superior, adicionarei outra coisa possível à lista.

Se o módulo que você está usando tiver uma falha no wrapper de injeção de dependência, ele fornecerá esse mesmo resultado. Por exemplo, os módulos copiar e colar da Internet podem depender do underscore.js e tentar injetar com ‘_’ no wrapper di. Se o sublinhado não existir em seus provedores de dependência de projeto, quando seu controlador tentar fazer referência à fábrica do seu módulo, ele receberá ‘provedor desconhecido’ para sua fábrica no registro do console do navegador.

O problema para mim foi que havia alguns novos arquivos javascript que eu criei que faziam referência ao serviço, mas o Chrome só viu a versão mais antiga. Um CTRL + F5 corrigiu para mim.

No meu caso, usei uma function anônima como wrapper para o módulo angular, assim:

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

Depois de fechar os parênteses, esqueci de chamar a function anônima abrindo e fechando os parênteses novamente como acima.

Recebi um erro “provedor desconhecido” relacionado a mocks angulares (ngMockE2E) ao compilar meu projeto com o Grunt. O problema é que as zombarias angulares não podem ser reduzidas, por isso tive que removê-las da lista de arquivos minificados.

Depois de lidar com esse erro também, posso suportar essa lista de respostas com meu próprio caso.

É ao mesmo tempo simples e estúpido (talvez não seja burro para iniciantes como eu, mas sim para especialistas), a referência de script para o angular.min.js deve ser o primeiro da sua lista de scripts na página html.

Isso funciona:

    

Isso não:

    

Observe sobre o angular.min.js.

Espero que ajude alguém !! 🙂

Meu problema foi com Yeoman, usando (capitalizado):

 yo angular:factory Test 

Arquivos Made (não legalizados):

 app/scripts/services/test.js 

mas o arquivo index.html incluído (em maiúsculas):

  

Espero que isso ajude alguém.

Ainda outra possibilidade.

Eu tinha unknown Provider <- <- nameOfMyService . O erro foi causado pela seguinte syntax:

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

Angular estava procurando pela '' dependência '' .

Meu cenário pode ser um pouco obscuro, mas pode causar o mesmo erro e alguém pode experimentá-lo, então:

Ao usar o serviço $ controller para instanciar um novo controlador (que estava esperando ‘$ scope’ como seu primeiro argumento injetado) eu estava passando o escopo local do novo controlador para o segundo parâmetro da function $ controller (). Isso levou o Angular a tentar invocar um serviço $ escopo que não existe ( embora, por um tempo, eu tenha pensado que eu teria deletado o serviço ‘$ scope’ do cache do Angular ). A solução é envolver o escopo local em um object local:

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

Nenhuma das respostas acima funcionou para mim, talvez eu estivesse fazendo completamente errado, mas como um novato é o que fazemos.

Eu estava inicializando o controlador em um div para ter uma lista:

  

E, em seguida, usando $routeProvider para mapear uma URL para o mesmo controlador. Assim que eu removi o ng-init o controlador trabalhou com a rota.

Eu tive o mesmo problema. Eu consertei isso usando $('body').attr("ng-app", 'MyApp') vez de para boostrap.

Porque eu fiz

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

para requisitos de arquitetura.

No meu aplicativo Ruby on Rails, eu fiz o seguinte:

 rake assets:precompile 

Isso foi feito no ambiente de ‘desenvolvimento’, que havia reduzido o Angular.js e incluído no arquivo /public/assets/application.js .

Remover os arquivos /public/assets/* resolveu o problema para mim.

Eu enfrentei um problema semelhante hoje e os problemas eram realmente muito pequenos

  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); } } } } }); 

Se você observar o bloco acima, na primeira linha você observará que eu injetei $ scope por engano que está incorreto. Eu removi essa dependência indesejada para resolver o problema.

  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); } } } } }); 

Outra ‘pegadinha’: eu estava recebendo este erro injetando $ timeout, e levei alguns minutos para perceber que eu tinha espaço em branco nos valores da matriz. Isso não funcionará:

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

Postando apenas no caso de alguém ter um erro bobo como esse.

Meu caso foi digitação desonesto

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

function tem um ‘c’!