Unknown provider: $resourceProvider after bundle

Question

I have af MVC 4.5 project with angularjs. I have done bundle and minification on controllers and factories. I have read about making angular controllers and factory minification safe, but I get this error and I cant find the problem:

Unknown provider: $resourceProvider

The Module:

var app = angular.module("seducApp", []);
app.$inject = ['ngRoute', 'ngResource', 'ngSanitize', 'ngAnimate', 'ui.tinymce', 'mgcrea.ngStrap.tooltip',
'mgcrea.ngStrap.datepicker', 'mgcrea.ngStrap.alert', 'ui.select', 'uuid4', 'rt.popup', 'angular-md5', 'mgcrea.ngStrap.button',
'ui.bootstrap.tabs', 'mgcrea.ngStrap.timepicker', 'naif.base64', 'base64', 'angular-smilies', 'angular-google-adsense',
'angularFileUpload', 'angular.directives-round-progress', 'numericbinding', 'ngImgCrop', 'ui.tree', 'timer',
'$httpProviderConfig', '$compileProviderConfig', '$locationProviderConfig', 'uiSelectConfig', 'datetimeFilter',
'cutFilter', 'groupFilter', 'partitionFilter', 'aDisabledDirective'];

The Factory:

app.factory('siteRepository', function ($resource, $http) {
   return {
        checkSiteStatus: function () {
            return $resource('/Home/GetSiteStatus').query();
        },
        getSiteStatus: function () { 
            return $http.get('/Home/GetSiteStatus') 
        },        
        getSiteChangeLog: function () {
            return $http.get('/Home/GetSiteChangeLog')
        }
    }
});

Debug is set to true in web.config, then I should not get the minified version of the factory.

I have tried a great number of things, but no solutions :(

have you verified you're actually not getting a minified file? — scniro, Feb 10 '16 at 15:41
All files in the bundle are not minified. If debug ist set to true in Web.config, then the noneminified version is included. Or is there at way to se or test this? — AHJ, Feb 10 '16 at 15:58
are you sure you are including the ng-resource script file as well? — scniro, Feb 10 '16 at 16:05

scniro · Accepted Answer · 2016-02-10T22:20:55.473

2

Remove the app.$inject statement. Instead, pass a dependency array. Observe the following simplified demo which demonstrates this a bit...

var mod = angular.module('mod', []);

mod.factory('modFactory', function() {

    return {
        'woo': function woo() {
            console.log('woah!');
        }
    }
});

// -----------------------------------------------------

var app = angular.module('app', ['mod']);

app.controller('ctrl', function(modFactory) {
    modFactory.woo();
});

The above works while the following will fail...

var app = angular.module('app', []);

app.$inject = ['mod'];

Unknown provider: modFactoryProvider

JSFiddle Link - demo

A quick fix on your issue would include changing you app definition to the following...

var app = angular.module('seducApp', ['ngRoute', 'ngResource', 'ngSanitize', 'ngAnimate', 'ui.tinymce', 'mgcrea.ngStrap.tooltip',
'mgcrea.ngStrap.datepicker', 'mgcrea.ngStrap.alert', 'ui.select', 'uuid4', 'rt.popup', 'angular-md5', 'mgcrea.ngStrap.button',
'ui.bootstrap.tabs', 'mgcrea.ngStrap.timepicker', 'naif.base64', 'base64', 'angular-smilies', 'angular-google-adsense',
'angularFileUpload', 'angular.directives-round-progress', 'numericbinding', 'ngImgCrop', 'ui.tree', 'timer',
'$httpProviderConfig', '$compileProviderConfig', '$locationProviderConfig', 'uiSelectConfig', 'datetimeFilter',
'cutFilter', 'groupFilter', 'partitionFilter', 'aDisabledDirective']);

Check out the Angular DI docs for more details on the topic

edited Feb 10 '16 at 22:20

answered Feb 10 '16 at 16:32

scniro

16,844
8
62
106

Right angular document only mention $inject on controller/service/directive etc, but not on modules – Okazari Feb 10 '16 at 16:47
@Okazari I saw that as well, though I couldn't find any details on injecting modules. Perhaps it's not possible, but it's a guess at this point – scniro Feb 10 '16 at 16:49
I guess it's because inject will find and get the dependency and will then inject it in a function. But a module is actually not a function unlike controllers/directive etc... – Okazari Feb 10 '16 at 16:53
This seems to solved the problem. Thanks. That saved the day :) – AHJ Feb 10 '16 at 17:31
Now I get a Error: [ng:areq] on the controllers, when I turn debug to false in web.config.. – AHJ Feb 10 '16 at 17:44
@AHJ probably now you're getting minified files, just re-write your factory the "min safe" way. You should be writing all of your controllers, services, and factories this way anyways e.g. `app.factory('siteRepository', ['$resource', '$http', function ($resource, $http) { /*...*/ }]);` – scniro Feb 10 '16 at 18:07

Okazari · Answer 2 · 2016-02-10T16:44:30.973

First could you try this piece of code ?

app.factory('siteRepository',['$resource','$http', function ($resource, $http) {
   return {
    checkSiteStatus: function () {
        return $resource('/Home/GetSiteStatus').query();
    },
    getSiteStatus: function () { 
        return $http.get('/Home/GetSiteStatus') 
    },        
    getSiteChangeLog: function () {
        return $http.get('/Home/GetSiteChangeLog')
    }
  }
}]);

If this work, you have a classic trouble with minification and injection.

I suggest you to look at https://github.com/olov/ng-annotate or to rewrite all your injection syntax in your application (with the array of dependency names)

Let me know if it helped and/or if you need more help about this.

Unknown provider: $resourceProvider after bundle

2 Answers2