3

I have a problem with injection when I minify my angularJS project with grunt. To do a simple test, I tried to do the same thing with the sample we have after creating a angular project with the npm generator like this :

npm install -g generator-angular
yo angular

I add just a little things with bower. Here is my bower file :

{
  "name": "angular-test",
  "version": "0.0.0",
 "dependencies": {
"angular": "1.2.15",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.11.0",
"bootstrap": "~3.0.3",
"angular-route": "~1.2.15",
"angular-bootstrap": "~0.10.0",
"angular-sanitize": "~1.2.15",
"angular-cookies": "~1.2.15",
"angular-resource": "~1.2.15"
},
"devDependencies": {
"angular-mocks": "1.2.15",
"angular-scenario": "1.2.15"
},
"resolutions": {
  "angular": "1.2.6"
}
}

Then I changed the app.js file like that :

'use strict';

angular
.module('angularTestApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
])
.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
    $httpProvider.interceptors.push(function ($q) {
        //We don't care about that ...
        return {
        'responseError': function (rejection) {
            if(rejection.status === 401) {
                console.log("Unauthorized page. Must redirect to ");

                return;
            }
            return $q.reject(rejection);
        }
    };
});
}]);

If I lauch the "grunt serve" task everything is ok. But, if I do a "grunt build" and then try to access the index.html file through Apache for example, I have the following error :

Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a <- $http <- $compile
http://errors.angularjs.org/1.2.15/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20%24http%20%3C-%20%24compile

I read in few posts that I have to use the ngmin task to minify but it is already done in the sample yeoman project. Si How can I fix this please ?

Thank you very much

Clement

clement
  • 489
  • 1
  • 5
  • 18
  • reproduced it on my windows machine with IIS as a webserver. Same error message. I try to find out what it is – PeterFromCologne Mar 28 '14 at 15:42
  • Couldn't find it. The line causing the problem is return $q.reject(rejection); but the code is correct, following the angular documentation – PeterFromCologne Mar 28 '14 at 16:17
  • Hello, asking this question I finnaly understood this post : http://stackoverflow.com/questions/17238759/angular-module-minification-bug For next users : you must uncomment the "uglify" task in the grunt config file and add the following to this task : "options: { mangle: false }," I just don't understand why this is initially commented. Can someone tell me if this solution is a good one or not please ? Why is this commented ? What is exactly the option "mangle:false" ? Thanks a lot – clement Mar 28 '14 at 16:43
  • you may want to read the minification section here: http://branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls/ – PeterFromCologne Mar 28 '14 at 16:54
  • I spent some time in the reproducing your problem and I hope I have helped you with my answer below. could you please be so kind and except my answer? – PeterFromCologne Mar 30 '14 at 18:29

1 Answers1

14

If you look into the minified scripts.js you will notice that the $q service gets the minified name "a". thats why you get the error message aProvider is unknown.

The $q must be defined as a dependency and properly injected.

instead of

$httpProvider.interceptors.push(function ($q) {

put 

$httpProvider.interceptors.push(['$q', function ($q) { ... }]);
PeterFromCologne
  • 10,213
  • 9
  • 36
  • 46