angularjs and json server error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- menuFactory

Question

Hi guys I developed small angularjs application and use json server to run my backend code. There is a problem with provider in my code. When I run that I got errors in below:

Uncaught TypeError: b.module(...).info is not a function at angular-resource.min.js:6 at angular-resource.min.js:14 angular.js:12808 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- menuFactory http://errors.angularjs.org/1.4.14/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20menuFactory at http://127.0.0.1:3000/bower_components/angular/angular.js:68:12 at http://127.0.0.1:3000/bower_components/angular/angular.js:4381:19 at Object.getService [as get] (http://127.0.0.1:3000/bower_components/angular/angular.js:4529:39) at http://127.0.0.1:3000/bower_components/angular/angular.js:4386:45 at getService (http://127.0.0.1:3000/bower_components/angular/angular.js:4529:39) at invoke (http://127.0.0.1:3000/bower_components/angular/angular.js:4561:13) at Object.instantiate (http://127.0.0.1:3000/bower_components/angular/angular.js:4578:27) at Object. (http://127.0.0.1:3000/bower_components/angular/angular.js:4438:24) at Object.invoke (http://127.0.0.1:3000/bower_components/angular/angular.js:4570:17) at Object.enforcedReturnValue [as $get] (http://127.0.0.1:3000/bower_components/angular/angular.js:4422:37)

Here is my codes for menufactory:

angular.module('confusionApp')
    .constant("baseURL","http://localhost:3000/")

        .service('menuFactory', ['$resource','baseURL', function($resource, baseURL) {

            var promotions = [
                {
                          _id:0,
                          name:'Weekend Grand Buffet', 
                          image: 'images/buffet.png',
                          label:'New',
                          price:'19.99',
                          description:'Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person ',
                }

            ];

                this.getDishes = function () {
                  return $resource(baseURL+"dishes/:id",null, {'update': {'method':'PUT'}});
                };


                this.getPromotion = function (index) {

                    return promotions[index];

                };

        }])

And this is controller:

angular.module('confusionApp')

    .controller('MenuController', ['$scope', 'menuFactory', function($scope, menuFactory) {

        $scope.tab = 1;
        $scope.filtText = '';
        $scope.showDetails = false;
        $scope.showMenu = true;
        $scope.message = "Loading...";
        $scope.dishes = menuFactory.getDishes().query();
        $scope.select = function(setTab) {
            $scope.tab = setTab;

            if (setTab === 2) {
                $scope.filtText = "appetizer";
            }
            else if (setTab === 3) {
                $scope.filtText = "mains";
            }
            else if (setTab === 4) {
                $scope.filtText = "dessert";
            }
            else {
                $scope.filtText = "";
            }
        };

        $scope.isSelected = function (checkTab) {
            return ($scope.tab === checkTab);
        };

        $scope.toggleDetails = function() {
            $scope.showDetails = !$scope.showDetails;
        };
    }])

Here is my route:

'use strict';

angular.module('confusionApp', ['ui.router', 'ngResource'])
.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

            // route for the home page
            .state('app', {
                url:'/',
                views: {
                    'header': {
                        templateUrl : 'views/header.html'
                    },
                    'content': {
                        templateUrl : 'views/home.html',
                        controller  : 'IndexController'
                    },
                    'footer': {
                        templateUrl : 'views/footer.html'
                    }
                }

            })

            // route for the aboutus page
            .state('app.aboutus', {
                url:'aboutus',
                views: {
                    'content@': {
                        templateUrl : 'views/aboutus.html',
                        controller  : 'AboutController'                  
                    }
                }
            })

            // route for the contactus page
            .state('app.contactus', {
                url:'contactus',
                views: {
                    'content@': {
                        templateUrl : 'views/contactus.html',
                        controller  : 'ContactController'                  
                    }
                }
            })

            // route for the menu page
            .state('app.menu', {
                url: 'menu',
                views: {
                    'content@': {
                        templateUrl : 'views/menu.html',
                        controller  : 'MenuController'
                    }
                }
            })

            // route for the dishdetail page
            .state('app.dishdetails', {
                url: 'menu/:id',
                views: {
                    'content@': {
                        templateUrl : 'views/dishdetail.html',
                        controller  : 'DishDetailController'
                   }
                }
            });

        $urlRouterProvider.otherwise('/');
    })
;

Thank you for reading.

did you inject the resource module `angular.module('confusionApp', ['ngResource']);` — Sachila Ranawaka, Mar 10 '17 at 13:07
Yes this is in another file angular.module('confusionApp', ['ui.router', 'ngResource']) — , Mar 10 '17 at 13:13
Make sure you're calling the factory.js before the controller too — Modar Na, Mar 10 '17 at 13:14
maybe the file path of resource is wrong. check it is correct file path — Sachila Ranawaka, Mar 10 '17 at 13:14
I checked that too. Even manually can access to json file from browser — , Mar 10 '17 at 13:15
You can use Google Chrome development tools to put a break point in the factory and reloading the page thus making sure it it being called and registered — Modar Na, Mar 10 '17 at 13:16
http://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome check best 2 answears — Modar Na, Mar 10 '17 at 13:20
After opening the dev tools there is a sources tab then on the left show navigator open the factory you should see your code and the lines are numbered click to the number and that is a break point then refresh — Modar Na, Mar 10 '17 at 13:36
no the same error again. I don't know why it is like that. I updated file added route that too. Maybe it can help — , Mar 10 '17 at 13:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137761/discussion-between-modar-na-and-agil-yolchuyev). — Modar Na, Mar 10 '17 at 14:01

score 0 · Answer 1 · answered Mar 10 '17 at 13:50

0

Are you defining the controller with a second call to angular.module on same module name ?e

have you tried calling angular.module('name') only once and then build on the returned instance:

var myApp = angular.module('confusionApp') .constant("baseURL","http://localhost:3000/") ....

and then:

myApp.controller(...)

if that does not do the trick, please share your root angular.module definition

answered Mar 10 '17 at 13:50

Kjeld Poulsen

213
3
4

The root module definition looks correct. Are you sure that menuFactory service is added before the controller. What the error message is saying is that it cannot find a provider for menuFactory. – Kjeld Poulsen Mar 10 '17 at 14:10
I see but the problem is that I cannot understand why it cannot find – Mar 10 '17 at 14:25
How are you loading the scripts. In single file or in multi files. If single file, is the service on top of the controller, if as multi file, do you load the service before the controller – Kjeld Poulsen Mar 10 '17 at 14:27
Yes this is SPA application. Here is order of the loading: – Mar 10 '17 at 14:28
– Mar 10 '17 at 14:28
You are loading service.js AFTER controllers.js try switch them around. – Kjeld Poulsen Mar 10 '17 at 14:32
Switched there place same – Mar 10 '17 at 14:33

score 0 · Accepted Answer · answered Mar 12 '17 at 04:09

I solved issue. The issue is not in my code. I know this is illogical but when I am using angular.js, angular-ui-router.js and angular-resource.js from bower I got the error which is in above. After changing the bower components to CDN it started to work well. So problem related to bower not to my code. Note: I used the same version of angular.js, angular-ui-router.js and angular-resource.js in bower and CDN

Emmanuel P. · Answer 3 · 2017-03-22T13:43:14.977

0

I think it is related to version gap between angular and ngResource versions. Your angular version (1.4) is too old for the newest version on ngResource (1.6).

If you want to stay with the same angular version, download the angular resource version 1.4.8, or in your bower, put "angular-resource": "1.5.8" (without ^ to download the specified version number)

edited Mar 22 '17 at 13:43

answered Mar 22 '17 at 08:39

Emmanuel P.

896
2
9
16

Thanks for response I solved issue. Yes it was gap between versions – Mar 22 '17 at 09:09

angularjs and json server error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- menuFactory

3 Answers3