AngularJS Inject service in .run function

问题

In my AngularJS app, using Yeoman, when minifying my app I have this error :

Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a <- $http <-  AuthenticationService

that I obviously do not have before minifying.

Here is the definition of my service in a separate runner.js file :

angular.module('myApp').run(['$rootScope', 'AuthenticationService', 'FlashService', 'SessionService', function ($rootScope, AuthenticationService, FlashService, SessionService) {
   //some code
}]);

I thought of course about the typical Injection error when minifying but I am struggling to see what is wrong in my code...

UPDATE

My AutenticationService :

angular.module('myApp').factory("AuthenticationService", ['$http', '$rootScope', '$sanitize', 'SessionService', 'FlashService', 'SETTINGS', function($http, $rootScope, $sanitize, SessionService, FlashService, SETTINGS) {

    var cacheSession   = function() {
        SessionService.set('authenticated', true);
    };

    var uncacheSession = function() {
        SessionService.unset('authenticated');
        SessionService.unset('user');
    };

    var loginError = function(response) {
        FlashService.show('warning', response.flash);
    };

    var loginSuccess = function(response) {
        SessionService.set('user', JSON.stringify(response));
        FlashService.clear();
    };

    var logoutSuccess = function(response) {
        FlashService.show('success', response.flash);
    };

    var sanitizeCredentials = function(credentials) {
        return {
            email: $sanitize(credentials.email),
            password: $sanitize(credentials.password)
        };
    };

    return {
        login: function(credentials) {
            var login = $http.post(SETTINGS.urlBackend+"/auth/login", sanitizeCredentials(credentials));
            login.success(cacheSession);
            login.success(loginSuccess);
            login.error(loginError);
            return login;
        },
        logout: function() {
            var logout = $http.get(SETTINGS.urlBackend+"/auth/logout");
            logout.success(uncacheSession);
            logout.success(logoutSuccess);
            logout.error(loginError);
            return logout;
        },
        isLoggedIn: function() {
            var checked = $http.get(SETTINGS.urlBackend+"/auth/check");
            return (checked && SessionService.get('authenticated'));
        }
    };
}]);

回答1:

Try setting mangle: false in the Uglify configuration in your Gruntfile.js:

grunt.initConfig({
  // ...
  uglify: {
    options: {
      mangle: false
    }
  }
});

I've had this happen when using certain packages from Bower. I believe some of the Angular UI suite of tools weren't compatible, for some reason.

回答2:

I highly recommend an alternative approach to manually setting up the angular minification work around - the wrapping of the "module" - controller, service, factory - in the [] brackets.

Use the ng-min module! It's written by the guys as Angular - namely Brian Ford. But most important it removes this complication in writing Angular modules, they become clean and readable again and the ng-min does the hard work of fixing minification issues.

I know it's not an answer to you question, but it might be a solution to the problem you are facing in general.

// Allow the use of non-minsafe AngularJS files. Automatically makes it // minsafe compatible so Uglify does not destroy the ng references

 ngmin: {
        dist: {
            files: [
                {
                    expand: true,
                    cwd: '.tmp/concat/scripts',
                    src: '*.js',
                    dest: '.tmp/concat/scripts'
                }
            ]
        }
    },

来源：https://stackoverflow.com/questions/23357500/angularjs-inject-service-in-run-function

标签

angularjs

gruntjs

yeoman