js ผู้ให้บริการที่ไม่รู้จักเชิงมุม


152

ฉันพยายามที่จะ "ปรับแต่ง" ตัวอย่าง 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;
    }]);

ข้อผิดพลาดนี้บ่งชี้ว่ามุมไม่ทราบเกี่ยวกับโรงงานผลิตภัณฑ์ตรวจสอบให้แน่ใจ JS สำหรับบริการนี้มีการอ้างอิงก่อน นอกจากนี้เมื่อประกาศโมดูลตรวจสอบให้แน่ใจว่าได้กำหนดไว้อย่างชัดเจนเพราะเมื่อไฟล์จะลดข้อผิดพลาดนี้จะเกิดขึ้นเนื่องจากการ mangling ของชื่อ สำหรับข้อมูลเพิ่มเติมดูที่บทความนี้ :: ozkary.com/2015/11/…
ozkary

คำตอบ:


130

รหัสของคุณดูดีในความเป็นจริงมันทำงาน (นอกเหนือจากการโทรตัวเอง) เมื่อคัดลอกและวางลงในตัวอย่าง 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) ดังนั้นฉันจึงมีอคติอย่างชัดเจนที่นี่


ฉันมีปัญหาเดียวกันและสิ่งนี้ไม่ได้แก้ปัญหาของฉัน ฉันได้รับข้อมูลกลับมาจริง ... ยกเว้นข้อความแสดงข้อผิดพลาดนี้คุณจะคิดว่าทุกอย่างทำงานได้ดี ฉันไม่ได้ใช้แอป ng-app ในองค์ประกอบของร่างกาย แต่ฉันกำลังเริ่มต้นใหม่อย่างเช่น: angular.element (เอกสาร). ready (function () {angular.bootstrap (เอกสาร, ['reportServices']);});
Tom

17
สวัสดีพวกนี้น่าอายนิดหน่อย ฉันมีปัญหาเดียวกันทั้งหมด แต่ฉันไม่สามารถเห็นความแตกต่างระหว่าง 2 jsFiddles คำแนะนำใด ๆ เกี่ยวกับสถานที่ที่จะดูว่าเป็นที่ชื่นชมอย่างมาก
schacki

4
@ schacki ความแตกต่างของซอสามารถพบได้ในแท็บข้อมูล หนึ่งในนั้นมีร่างกายที่มี<body ng-app="productServices">และอื่น ๆ <body ng-app="">ที่มี
Vineet Reynolds

แท็บข้อมูลอยู่ที่ไหน :)
Aleks

3
ดูเหมือนว่าแท็บข้อมูลจะเป็นFiddle Optionsแท็บทางด้านขวา
Gangstead

40

ฉันได้รับข้อผิดพลาดนั้นเนื่องจากฉันส่งพารามิเตอร์ที่ไม่ถูกต้องไปยังข้อกำหนดของโรงงาน ฉันมี:

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

ทำงานเมื่อฉันลบ$scopeและเปลี่ยนคำจำกัดความจากโรงงานเป็น:

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

ในกรณีที่คุณต้องการฉีด$scopeให้ใช้:

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

32

ฉันเพิ่งมีปัญหาที่คล้ายกัน ข้อผิดพลาดกล่าวเช่นเดียวกันในคำถามพยายามแก้ไขด้วยคำตอบของ pkozlowski.opensource และ Ben G ซึ่งทั้งคู่เป็นคำตอบที่ถูกต้องและดี

ปัญหาของฉันแตกต่างอย่างแน่นอนกับข้อผิดพลาดเดียวกัน:

ใน HTML-Code ของฉันฉันมีการเริ่มต้นเช่นนี้ ...

<html ng-app>

ไกลออกไปเล็กน้อยฉันพยายามทำสิ่งนี้:

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

ฉันกำจัดอันแรกออกไป ... แล้วมันก็ใช้งานได้ ... เห็นได้ชัดว่าคุณไม่สามารถเริ่มแอพ ng-app สองครั้งหรือมากกว่า ยุติธรรมพอสมควร

ฉันลืมไปเลยว่า "ng-app" ตัวแรกและได้รับความผิดหวังอย่างสิ้นเชิง บางทีนี่อาจจะช่วยใครซักคนในวันนี้ ...


2
ฉันมีปัญหาที่คล้ายกัน แต่ในกรณีของฉันที่มีตัวควบคุม ng ที่ระบุใน divเป็นผู้ร้ายสำหรับตัวควบคุมที่อ้างอิงบริการ ดูเหมือนว่า Angular ไม่ทราบวิธีแก้ไขบริการเมื่อแยกวิเคราะห์มุมมอง
Hector Correa

25

ตรวจสอบให้แน่ใจว่าหลักของคุณapp.jsรวมถึงบริการที่ขึ้นอยู่กับมัน ตัวอย่างเช่น:

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

1
หากฉันไม่ผิดพลาดในกรณีเช่นนี้productServicesควรเป็นโมดูลดังนั้นจึงไม่เกี่ยวข้องกับสิ่งที่อยู่ในโมดูลดังกล่าว (บริการหรือไม่)
greenoldman

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สตริงต่อท้าย -> xyzจะกลายเป็นxyzProviderกลายเป็น

Ex:

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

หากคุณฉีดผู้ให้บริการด้านบนโดยไม่มีสตริง 'ผู้ให้บริการ' คุณจะได้รับข้อผิดพลาดที่คล้ายกันใน OP


8

ในตอนท้ายของไฟล์ JS เพื่อปิดฟังก์ชั่นจากโรงงานที่ฉันมี

});

แทน

}());


1
สำหรับโครงการของฉันเรามักจะใช้})();
mrOak

5

ฉันใช้เวลานานเกินกว่าจะติดตามได้ ตรวจสอบให้แน่ใจว่าคุณลดขนาดตัวควบคุมในคำสั่งของคุณ

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

  return {

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

    }]
  }
}

หวังว่าจะช่วย


5

เพื่อเพิ่มประสบการณ์ของตัวเองที่นี่ฉันพยายามฉีดบริการลงในหนึ่งในฟังก์ชั่นการกำหนดค่าโมดูลของฉัน ย่อหน้านี้จากเอกสารที่ฉันพบในที่สุดอธิบายว่าทำไมมันไม่ทำงาน:

ในระหว่างการบูทแอพพลิเคชั่นก่อนที่ Angular จะปิดการสร้างบริการทั้งหมดมันจะกำหนดค่าและสร้างผู้ให้บริการทั้งหมด เราเรียกสิ่งนี้ว่าเฟสการกำหนดค่าของวงจรชีวิตแอ็พพลิเคชัน ในช่วงนี้ยังไม่สามารถเข้าถึงบริการได้เนื่องจากยังไม่ได้สร้าง

หมายความว่าคุณสามารถฉีดผู้ให้บริการเข้าสู่ฟังก์ชั่น module.config (... ) แต่คุณไม่สามารถฉีดบริการเพราะคุณต้องรอจนกว่า module.run (... ) หรือเปิดเผยผู้ให้บริการที่คุณสามารถฉีดเข้ากับโมดูล การตั้งค่า


4

สำหรับฉันข้อผิดพลาดนี้เกิดจากการเรียกใช้แอพเชิงมุมรุ่นย่อ เอกสารเชิงมุมแนะนำวิธีการแก้ไขปัญหานี้ นี่คือข้อความอ้างอิงที่เกี่ยวข้องซึ่งอธิบายถึงปัญหาและคุณสามารถค้นหาวิธีแก้ไขปัญหาที่แนะนำในเอกสารเองได้ที่นี่ :

หมายเหตุเกี่ยวกับการลดขนาดเนื่องจาก Angular infers การพึ่งพาของตัวควบคุมจากชื่อของข้อโต้แย้งไปยังฟังก์ชั่นการสร้างของตัวควบคุมถ้าคุณจะลดรหัส JavaScript สำหรับตัวควบคุม PhoneListCtrl ทั้งหมดของฟังก์ชั่นการโต้แย้งจะถูกลดขนาดเช่นกัน สามารถระบุบริการได้อย่างถูกต้อง


3

เนื่องจากนี่คือผลลัพธ์อันดับต้น ๆ สำหรับ "ผู้ให้บริการที่ไม่รู้จัก angularjs" บน Google ในขณะนี้นี่คือ gotcha อีกรายการ เมื่อทำการทดสอบหน่วยกับจัสมินให้แน่ใจว่าคุณมีคำสั่งนี้ในการbeforeEach()ทำงานของคุณ:

module('moduleName'); 

มิฉะนั้นคุณจะได้รับข้อผิดพลาดเดียวกันนี้ในการทดสอบของคุณ


3

อีกกรณีหนึ่งที่ข้อผิดพลาดนี้จะเกิดขึ้นหากบริการของคุณถูกกำหนดไว้ในไฟล์ javascript แยกต่างหากตรวจสอบให้แน่ใจว่าคุณอ้างอิงมัน! ใช่ฉันรู้ผิดมือใหม่


2

ฉันลืมที่จะฉีดไฟล์ที่ให้บริการของฉันทั้งหมด อย่าลืมทำเช่นนี้เมื่อเริ่มต้นโมดูลแอปของคุณ:

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

2

ในกรณีของฉันฉันใช้ฟังก์ชันที่ไม่ระบุชื่อเป็น wrapper สำหรับโมดูลเชิงมุมเช่นนี้

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

หลังจากปิดวงเล็บฉันลืมที่จะเรียกใช้ฟังก์ชันที่ไม่ระบุตัวตนโดยการเปิดและปิดวงเล็บอีกครั้งดังกล่าวข้างต้น


ฉันรู้ว่าคุณตอบมันเมื่อ 4 ปีก่อน แต่มันช่วยฉันวันนี้ขอบคุณ
เลโกลัส

1

สำหรับฉันปัญหาคือขี้เกียจโหลด; ฉันโหลดคอนโทรลเลอร์และบริการของฉันล่าช้าดังนั้นจึงไม่สามารถใช้งานได้เมื่อโหลดหน้าเว็บ (และการเริ่มต้นเชิงมุม) ฉันทำสิ่งนี้ด้วยแท็ก ui-if แต่นั่นไม่เกี่ยวข้อง วิธีแก้ไขคือโหลดบริการด้วยการโหลดหน้าเว็บแล้ว


1

นี่เป็นอีกสถานการณ์ที่เป็นไปได้ที่คุณสามารถเห็นข้อผิดพลาดนี้:

หากคุณใช้ Sublime Text 2 และปลั๊กอินเชิงมุมมันจะสร้างสตับเช่นนี้

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

        }
    }
]);

สังเกตว่า '' ว่างเปล่าเป็นองค์ประกอบแรกของอาร์เรย์หลังจากสตริง 'utilFactory' หากคุณไม่มีการพึ่งพาใด ๆ ให้ลบออกดังนั้นจึงเป็นเช่นนี้:

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

        }
    }
]);

1

เนื่องจากคำถามนี้เป็นผลลัพธ์บนสุดของ Google ฉันจะเพิ่มสิ่งที่เป็นไปได้ลงในรายการ

หากโมดูลที่คุณกำลังใช้มีความล้มเหลวใน wrapper การฉีดพึ่งพามันจะให้ผลลัพธ์เดียวกันนี้ ตัวอย่างเช่นโมดูลการคัดลอกและวางจากอินเทอร์เน็ตอาจใช้ underscore.js และพยายามฉีดด้วย '_' ใน di wrapper หากไม่มีขีดเส้นใต้ในผู้ให้บริการอ้างอิงโครงการของคุณเมื่อคอนโทรลเลอร์ของคุณพยายามอ้างอิงถึงโรงงานโมดูลของคุณจะได้รับ 'ผู้ให้บริการที่ไม่รู้จัก' สำหรับโรงงานของคุณในบันทึกคอนโซลของเบราว์เซอร์


1

ปัญหาสำหรับฉันคือมีไฟล์จาวาสคริปต์ใหม่ที่ฉันสร้างขึ้นซึ่งอ้างอิงบริการ แต่ Chrome เห็นเฉพาะเวอร์ชันเก่ากว่า CTRL + F5 แก้ไขให้ฉัน


0

ฉันได้รับข้อผิดพลาด "ผู้ให้บริการที่ไม่รู้จัก" ที่เกี่ยวข้องกับ angular-mocks (ngMockE2E) เมื่อรวบรวมโครงการของฉันกับ Grunt ปัญหาคือว่า mocks เชิงมุมไม่สามารถลดขนาดได้ดังนั้นฉันจึงต้องลบออกจากรายการของไฟล์ที่ลดขนาด


0

หลังจากจัดการกับข้อผิดพลาดนี้ด้วยฉันสามารถสนับสนุนรายการคำตอบนี้กับเคสของฉันเอง

ในเวลาเดียวกันนั้นเรียบง่ายและเป็นใบ้ (อาจไม่ใช่ใบ้สำหรับผู้เริ่มต้นอย่างฉัน แต่ใช่สำหรับผู้เชี่ยวชาญ) การอ้างอิงสคริปต์กับ 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

ปัญหาของฉันอยู่กับ Yeoman การใช้ (ตัวพิมพ์ใหญ่):

yo angular:factory Test

ทำไฟล์ (uncapitalized):

app/scripts/services/test.js

แต่ไฟล์ index.html รวมอยู่ด้วย (ตัวพิมพ์ใหญ่):

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

หวังว่านี่จะช่วยใครซักคน


0

ความเป็นไปได้อีกอย่างหนึ่ง

unknown Provider <- <- nameOfMyServiceฉันมี ข้อผิดพลาดเกิดจากไวยากรณ์ต่อไปนี้:

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

เชิงมุมกำลังมองหาการ''พึ่งพา


ข้อผิดพลาด: [$ injector: unpr] ผู้ให้บริการที่ไม่รู้จัก: LoginFactoryProvider <- LoginFactory ฉันได้ใช้แล้วฉันจะแก้ไขได้อย่างไร
ninjaXnado

0

สถานการณ์ของฉันอาจคลุมเครือเล็กน้อย แต่อาจทำให้เกิดข้อผิดพลาดเดียวกันและบางคนอาจประสบกับมันดังนั้น:

เมื่อใช้บริการ $ controller เพื่อสร้างอินสแตนซ์คอนโทรลเลอร์ใหม่ (ซึ่งคาดว่าจะเป็น '$ scope' เนื่องจากเป็นอาร์กิวเมนต์แรกที่ถูกฉีดเข้าไป) ฉันกำลังส่งขอบเขตโลคัลของคอนโทรลเลอร์ใหม่ไปยังพารามิเตอร์ที่สองของฟังก์ชัน $ controller () สิ่งนี้นำไปสู่ ​​Angular ที่พยายามเรียกใช้บริการ $ scope ที่ไม่มีอยู่ ( แม้ว่าในขณะนี้ฉันคิดว่าฉันมีวิธีลบบริการ '$ scope' ออกจากแคชของ Angular ) การแก้ปัญหาคือการห่อขอบเขตท้องถิ่นในวัตถุท้องถิ่น:

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

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

0

คำตอบข้างต้นไม่เหมาะกับฉันบางทีฉันอาจทำผิดอย่างสมบูรณ์ แต่ในฐานะผู้เริ่มต้นนั่นคือสิ่งที่เราทำ

ฉันเริ่มต้นตัวควบคุมdivเพื่อให้มีรายการ:

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

แล้วใช้$routeProviderในการแมป URL กับตัวควบคุมเดียวกัน ทันทีที่ฉันลบng-initคอนโทรลเลอร์จะทำงานกับเส้นทาง


0

ฉันมีปัญหาเดียวกัน ฉันแก้ไขที่ใช้$('body').attr("ng-app", 'MyApp')แทน<body ng-app="MyApp">การเพิ่ม

เพราะฉันทำ

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

สำหรับความต้องการสถาปัตยกรรม


0

ในแอพ Ruby on Rails ของฉันฉันได้ทำสิ่งต่อไปนี้แล้ว:

rake assets:precompile

สิ่งนี้ทำในสภาพแวดล้อม 'การพัฒนา' ซึ่งมีการย่อ Angular.js และรวมไว้ใน/public/assets/application.jsไฟล์

การลบ/public/assets/*ไฟล์ช่วยแก้ไขปัญหาให้ฉันได้


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

หากคุณสังเกตเห็นบล็อกข้างต้นในบรรทัดแรกคุณจะสังเกตเห็นฉันฉีดขอบเขต $ โดยไม่ได้ตั้งใจซึ่งไม่ถูกต้อง ฉันลบการอ้างอิงที่ไม่พึงประสงค์นั้นเพื่อแก้ไขปัญหา

 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

ฉันมีข้อผิดพลาดนี้หลังจากที่ฉันสร้างโรงงานใหม่และใช้ภายในส่วนประกอบ แต่ฉันไม่ได้ตรวจสอบรายละเอียดของส่วนประกอบนั้น

ดังนั้นหากความล้มเหลวในไฟล์ทดสอบ (รายละเอียด) ของคุณ

คุณต้องเพิ่ม beforeEach(module('YouNewServiceModule'));


-1

อีก 'gotcha': ฉันได้รับข้อผิดพลาดนี้ขณะฉีด $ timeout และใช้เวลาสองสามนาทีในการรู้ว่าฉันมีช่องว่างในค่าอาร์เรย์ สิ่งนี้จะไม่ทำงาน:

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

การโพสต์ในกรณีที่คนอื่นมีข้อผิดพลาดแบบนี้


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.