penyedia js sudut tidak diketahui

152

Saya mencoba "menyesuaikan" contoh mongolab agar sesuai dengan API REST saya sendiri. Sekarang saya mengalami kesalahan ini dan saya tidak yakin apa yang saya lakukan salah:

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)

Ini adalah pengontrol saya:

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

dan ini adalah modul:

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

      return Product;
    }]);

angularjs

— Stefan Ernst
sumber

Kesalahan ini menunjukkan bahwa sudut tidak tahu tentang pabrik produk, pastikan JS untuk layanan ini adalah referensi terlebih dahulu. Juga ketika mendeklarasikan modul pastikan untuk secara eksplisit mendefinisikan dependensi karena ketika file diminimalkan kesalahan ini juga akan muncul karena mangling nama. Untuk info lebih lanjut, lihat artikel ini :: ozkary.com/2015/11/…

— ozkary

130

Kode Anda terlihat bagus, bahkan berfungsi (terlepas dari panggilannya sendiri) ketika disalin & disisipkan ke dalam sampel jsFiddle: http://jsfiddle.net/VGaWD/

Sulit mengatakan apa yang sedang terjadi tanpa melihat contoh yang lebih lengkap tapi saya harap jsFiddle di atas akan membantu. Yang saya curigai adalah bahwa Anda tidak menginisialisasi aplikasi Anda dengan modul 'productServices' . Ini akan memberikan kesalahan yang sama, kita bisa melihat ini di jsFiddle lain: http://jsfiddle.net/a69nX/1/

Jika Anda berencana untuk bekerja dengan AngularJS dan MongoLab saya akan menyarankan menggunakan adaptor yang ada untuk $ resource dan MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab. Ini meringankan banyak rasa sakit bekerja dengan MongoLab, Anda dapat melihatnya beraksi di sini: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Penafian! Saya memelihara adaptor ini (ditulis berdasarkan contoh AngularJS) jadi saya jelas bias di sini.

— pkozlowski.opensource
sumber

Saya memiliki masalah yang sama dan ini tidak menyelesaikan masalah saya. Saya benar-benar mendapatkan data kembali ... Kecuali untuk pesan kesalahan ini Anda akan berpikir semuanya bekerja dengan baik. Saya tidak menggunakan aplikasi-ng di elemen tubuh, saya bootstrap seperti: angular.element (document) .ready (function () {angular.bootstrap (document, ['reportServices']);;));

— Tom

17

Hai teman-teman, ini sedikit memalukan. Saya memiliki masalah yang persis sama. Tapi saya tidak bisa melihat perbedaan antara 2 jsFiddles. Petunjuk tentang di mana mencarinya sebenarnya sangat dihargai.

— schacki

4

@schacki, Perbedaan dalam biola dapat ditemukan di tab info. Salah satunya memiliki tubuh dengan <body ng-app="productServices">dan yang lainnya memiliki <body ng-app="">.

— Vineet Reynolds

Dan di mana tab info? :)

— Aleks

3

Sepertinya tab info sekarang adalah Fiddle Optionstab di sebelah kanan

— Gangstead

40

Saya mendapatkan kesalahan itu karena saya memberikan parameter yang salah ke definisi pabrik. Saya punya:

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

Ini berhasil ketika saya menghapus $scopedan mengubah definisi pabrik menjadi:

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

Jika Anda perlu menyuntikkan $scope, gunakan:

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

— bresleveloper
sumber

32

Saya hanya punya masalah serupa. Kesalahan mengatakan hal yang sama dalam pertanyaan, mencoba menyelesaikannya dengan jawaban pkozlowski.opensource dan Ben G, yang keduanya merupakan jawaban yang benar dan baik.

Masalah saya memang berbeda dengan kesalahan yang sama:

di HTML-Code saya, saya punya inisialisasi seperti ini ...

<html ng-app>

Sedikit lebih jauh ke bawah saya mencoba melakukan sesuatu seperti ini:

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

Saya menyingkirkan yang pertama ... lalu bekerja ... jelas Anda tidak dapat menginisialisasi aplikasi-ng dua kali atau lebih. cukup adil.

Saya benar-benar lupa tentang "ng-app" pertama dan merasa sangat frustrasi. Mungkin ini akan membantu seseorang suatu hari nanti ...

— Preexo
sumber

2

Saya memiliki masalah yang sama tetapi dalam kasus saya memiliki ng-controller yang ditentukan dalam div adalah biang keladinya untuk controller yang mereferensikan layanan. Tampaknya Angular tidak tahu cara menyelesaikan layanan ketika mem-parsing tampilan.

— Hector Correa

25

Pastikan utama Anda app.jsmenyertakan layanan yang menjadi sandarannya. Sebagai contoh:

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

— BeginnerAngularJs
sumber

1

Jika saya tidak salah, dalam kasus seperti itu productServicesharus modul, jadi tidak relevan apa yang ada di dalam modul tersebut (layanan atau tidak).

— greenoldman

17

Jawaban pkozlowski benar, tetapi kalau-kalau ini terjadi pada orang lain, saya mengalami kesalahan yang sama setelah membuat modul yang sama dua kali karena kesalahan; definisi kedua mengesampingkan penyedia yang pertama:

Saya membuat modul dengan melakukan

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

kemudian sedikit lebih jauh ke bawah di file yang sama:

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

Cara yang benar untuk melakukan ini adalah:

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

— Ben G
sumber

11

Dalam kasus saya, saya telah menetapkan penyedia baru, katakanlah, xyz

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

Ketika Anda mengkonfigurasi penyedia di atas, Anda harus menyuntikkannya dengan Providerstring yang ditambahkan -> xyzmenjadixyzProvider .

Ex:

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

Jika Anda menyuntikkan penyedia di atas tanpa string 'Penyedia', Anda akan mendapatkan kesalahan serupa di OP.

— manikanta
sumber

8

Pada akhir file JS untuk menutup fungsi pabrik yang saya miliki

});

dari pada

}());

— Milo P
sumber

1

Untuk proyek saya, kami biasanya menggunakan})();

— mrOak

5

Ini membuat saya terlalu lama untuk dilacak. Pastikan Anda minisafe controller Anda dalam arahan Anda.

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

  return {

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

    }]
  }
}

Semoga itu bisa membantu

— pk1m
sumber

5

Untuk menambahkan pengalaman saya sendiri di sini, saya mencoba menyuntikkan layanan ke salah satu fungsi konfigurasi modul saya. Paragraf ini dari dokumen yang akhirnya saya temukan menjelaskan mengapa itu tidak berhasil:

Selama bootstrap aplikasi, sebelum Angular berbunyi menciptakan semua layanan, ia mengkonfigurasi dan membuat instantiate semua penyedia. Kami menyebutnya tahap konfigurasi siklus hidup aplikasi. Selama fase ini, layanan tidak dapat diakses karena belum dibuat.

Berarti Anda bisa menyuntikkan penyedia ke fungsi module.config (...), tetapi Anda tidak bisa menyuntikkan layanan, untuk itu Anda harus menunggu hingga module.run (...), atau mengekspos penyedia yang dapat Anda suntikkan ke modul. konfigurasi

— Stewart A
sumber

4

Bagi saya, kesalahan ini disebabkan oleh menjalankan versi yang diperkecil dari aplikasi sudut saya. Dokumen sudut menyarankan cara untuk mengatasi ini. Berikut adalah kutipan yang relevan yang menjelaskan masalah ini, dan Anda dapat menemukan solusi yang disarankan di dokumen sendiri di sini :

Catatan tentang Minifikasi Karena Angular menyimpulkan ketergantungan pengontrol dari nama argumen ke fungsi konstruktor pengontrol, jika Anda harus mengecilkan kode JavaScript untuk pengontrol PhoneListCtrl, semua argumen fungsinya akan diperkecil juga, dan injektor ketergantungan tidak akan dapat mengidentifikasi layanan dengan benar.

— Sasha
sumber

3

Karena ini adalah hasil teratas untuk "penyedia tidak dikenal" di Google sekarang, inilah gotcha lain. Saat melakukan pengujian unit dengan Jasmine, pastikan Anda memiliki pernyataan ini dalam beforeEach()fungsi Anda :

module('moduleName');

Kalau tidak, Anda akan mendapatkan kesalahan yang sama dalam tes Anda.

— roufamatic
sumber

3

Namun kasus lain di mana kesalahan ini akan terjadi, jika layanan Anda didefinisikan dalam file javascript terpisah, pastikan Anda referensi itu! Ya, saya tahu, kesalahan pemula.

— Jason
sumber

2

Saya lupa menyuntikkan file yang menampung layanan saya sama sekali. Ingatlah untuk melakukan ini ketika menginisialisasi modul aplikasi Anda:

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

— jorisw
sumber

2

Dalam kasus saya, saya menggunakan fungsi anonim sebagai pembungkus untuk modul sudut, seperti ini:

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

Setelah menutup tanda kurung, saya lupa memanggil fungsi anonim dengan membuka dan menutup tanda kurung lagi seperti di atas.

— Emanuele Bellini
sumber

saya tahu Anda menjawabnya 4 tahun lalu, tetapi itu membantu saya hari ini, terima kasih.

— Legolas

1

Bagi saya masalahnya adalah pemuatan malas; Saya memuat pengontrol dan layanan saya terlambat, sehingga tidak tersedia saat memuat halaman (dan inisialisasi Angular). Saya melakukan ini dengan tag ui-if, tapi itu tidak relevan. Solusinya adalah memuat layanan dengan memuat halaman sudah.

— Gonfi den Tschal
sumber

1

Berikut ini adalah skenario lain yang memungkinkan Anda melihat kesalahan ini:

Jika Anda menggunakan Sublime Text 2 dan plugin angular, itu akan menghasilkan bertopik seperti ini

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

        }
    }
]);

perhatikan kosong '' sebagai elemen pertama dari array setelah string 'utilFactory'. Jika Anda tidak memiliki dependensi, hapus itu jadi seperti ini:

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

        }
    }
]);

— dustin.schultz
sumber

1

Karena pertanyaan ini adalah hasil teratas google, saya akan menambahkan hal lain yang mungkin ke daftar.

Jika modul yang Anda gunakan memiliki kegagalan pada bungkus injeksi ketergantungan, itu akan memberikan hasil yang sama. Misalnya modul salin & tempel dari internet dapat mengandalkan underscore.js dan mencoba menyuntikkan '_' di bungkusnya. Jika garis bawah tidak ada di penyedia ketergantungan proyek Anda, ketika pengontrol Anda mencoba merujuk pabrik modul Anda, itu akan mendapatkan 'penyedia tidak dikenal' untuk pabrik Anda di log konsol browser.

— pengguna1082202
sumber

1

Masalahnya bagi saya adalah bahwa ada beberapa file javascript baru yang saya buat yang mereferensikan layanan namun Chrome hanya melihat versi yang lebih lama. A CTRL + F5 memperbaikinya untuk saya.

— mortey
sumber

0

Saya mendapat kesalahan "penyedia tidak dikenal" yang terkait dengan angular-mock (ngMockE2E) ketika mengkompilasi proyek saya dengan Grunt. Masalahnya adalah angular-mock tidak dapat dikecilkan sehingga saya harus menghapusnya dari daftar file yang diperkecil.

— Rusty Fausak
sumber

0

Setelah menangani kesalahan ini juga, saya dapat mendukung daftar jawaban ini dengan kasus saya sendiri.

Ini pada saat yang sama sederhana dan bodoh (mungkin tidak bodoh untuk pemula seperti saya, tapi ya untuk para ahli), referensi skrip ke angular.min.js harus menjadi yang pertama dalam daftar skrip Anda di halaman html.

Ini bekerja:

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

Ini bukan:

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

Perhatikan tentang angular.min.js.

Semoga ini bisa membantu siapa pun !! :)

— Joe Lewis
sumber

0

Masalah saya dengan Yeoman, menggunakan (huruf besar):

yo angular:factory Test

File buatan (tidak dikapitalisasi):

app/scripts/services/test.js

tetapi file index.html termasuk (dikapitalisasi):

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

Semoga ini bisa membantu seseorang.

— Corey Rothwell
sumber

0

Namun kemungkinan lain.

Saya punya unknown Provider <- <- nameOfMyService. Kesalahan ini disebabkan oleh sintaks berikut:

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

Angular mencari ''ketergantungan.

— Hugo Wood
sumber

Kesalahan: [$ injector: uns] Penyedia tidak dikenal: LoginFactoryProvider <- LoginFactory saya punya yang satu ini, jadi bagaimana saya bisa memperbaikinya

— ninjaXnado

0

Skenario saya mungkin sedikit tidak jelas tetapi dapat menyebabkan kesalahan yang sama dan seseorang mungkin mengalaminya, jadi:

Ketika menggunakan layanan $ controller untuk instantiate controller baru (yang mengharapkan '$ scope' sebagai argumen pertama yang diinjeksikan), saya mengirimkan lingkup lokal controller baru ke parameter kedua $ controller () function. Ini mengarah ke Angular mencoba memanggil layanan $ scope yang tidak ada ( walaupun, untuk sementara waktu, saya benar-benar berpikir bahwa saya akan sedikit menghapus layanan '$ scope' dari cache Angular ). Solusinya adalah dengan membungkus lingkup lokal di objek lokal:

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

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

— Zac Seth
sumber

0

Tidak ada jawaban di atas yang bekerja untuk saya, mungkin saya melakukan kesalahan, tetapi sebagai pemula itulah yang kami lakukan.

Saya sedang menginisialisasi controller divagar memiliki daftar:

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

Dan kemudian gunakan $routeProvideruntuk memetakan URL ke pengontrol yang sama. Segera setelah saya melepas ng-initcontroller bekerja dengan rute.

— jfs.csantos
sumber

0

Saya memiliki masalah yang sama. Saya memperbaikinya menggunakan $('body').attr("ng-app", 'MyApp')bukan<body ng-app="MyApp"> untuk meningkatkan.

Karena saya melakukannya

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

untuk persyaratan arsitektur.

— Jokerm
sumber

0

Di aplikasi Ruby on Rails saya, saya telah melakukan hal berikut:

rake assets:precompile

Ini dilakukan di lingkungan 'pengembangan', yang telah memperkecil Angular.js dan memasukkannya ke dalam /public/assets/application.js file.

Menghapus /public/assets/*file memecahkan masalah bagi saya.

— Nigel Sheridan-Smith
sumber

0

Saya menghadapi masalah yang sama hari ini dan masalah sangat kecil

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

Jika Anda mengamati blok di atas, pada baris pertama Anda akan mengamati saya menyuntikkan $ scope karena kesalahan yang tidak benar. Saya menghapus ketergantungan yang tidak diinginkan untuk menyelesaikan masalah.

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

— Rakesh Burbure
sumber

0

Saya mengalami kesalahan ini setelah saya membuat pabrik baru dan menggunakannya dalam suatu komponen tetapi saya tidak memeriksa spesifikasi komponen itu

jadi jika kegagalan dalam (spesifikasi) file pengujian Anda

Anda perlu menambahkan beforeEach(module('YouNewServiceModule'));

— Basheer AL-MOMANI
sumber

-1

'Gotcha' lain: Saya mendapatkan kesalahan ini dengan menyuntikkan $ timeout, dan butuh beberapa menit untuk menyadari bahwa saya memiliki spasi dalam nilai array. Ini tidak akan berfungsi:

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

Posting untuk berjaga-jaga jika ada orang lain yang memiliki kesalahan konyol seperti ini.

— Lukus
sumber

-2

Kasus saya mengetik dengan cerdik

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

fungsi memiliki 'c'!

— mendarat
sumber