Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService?

Question

I'm testing an ionic app created using creator.

I put the following code in services.js.

angular.module('app.services', [])

.factory('BlankFactory', [function(){
}])
.factory('EventService', ['$resource', function ($resource) {
    return $resource('https://.....net/api/events/:id');
}])
.service('BlankService', [function(){
}]);

And the following code in controllers.js.

angular.module('app.controllers', [])
......
  .controller('nightlifeCtrl', function ($scope, EventService) {
    $scope.events = EventsService.query({category: "Nightlife"});
})

Hoever I got the following error in js console?

ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20EventService
    at ionic.bundle.js:13380
    at ionic.bundle.js:17574
    at Object.getService [as get] (ionic.bundle.js:17721)
    at ionic.bundle.js:17579
    at getService (ionic.bundle.js:17721)
    at Object.invoke (ionic.bundle.js:17753)
    at Object.enforcedReturnValue [as $get] (ionic.bundle.js:17615)
    at Object.invoke (ionic.bundle.js:17762)
    at ionic.bundle.js:17580
    at getService (ionic.bundle.js:17721)

I tried to add the dependency by angular.module('...', ['ngResource']) but it got the following error.

ionic.bundle.js:17697 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:

And I didn't find the file angular-resource.js in the js files. Should I avoid ngResource and use plain ajax call?

In index.html

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>

Aditya Singh Aditya Singh · Accepted Answer · 2016-04-16T06:56:13

Its not working because you have not loaded the angular-resource dependency. If you want to use an external module in angular, you need to load it as a dependency in your module definition by passing name of the module in the second array parameter to angular.module. In your case name of the module is ngResource. Load the script file for angular-resource.js and then add it as dependency as below:

angular.module('app.services', ['ngResource'])

Also I see that you have not loaded app.services as dependency in app.controller. You need to either load that dependency or load both these dependencies in your app definition module as:

angular.module('app', [
  'app.services',
  'app.controllers'
]);

Updated JSBIN with fix for console error

Your code also had one typo. You were referring to EventsService in your controller while the name was EventService. I have fixed that as well in the jsbin

Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService?

1 Answers