December 30, 2013

Grunt uglify task breaks angular app

Here is the error in the browser console :

  1. Error: [$injector:unpr] Unknown provider: aProvider <- a http://errors.angularjs.org/1.2.7-build.2026+sha.7d6e5a2/$injector/unpr?p0=aProvider%20%3C-%20a at http://localhost:9000/vendor/bower_components/angular/angular.js:78:12 at http://localhost:9000/vendor/bower_components/angular/angular.js:3538:19 at Object.getService [as get] (http://localhost:9000/vendor/bower_components/angular/angular.js:3665:39) at http://localhost:9000/vendor/bower_components/angular/angular.js:3543:45 at getService (http://localhost:9000/vendor/bower_components/angular/angular.js:3665:39) at invoke (http://localhost:9000/vendor/bower_components/angular/angular.js:3687:13) at Object.instantiate (http://localhost:9000/vendor/bower_components/angular/angular.js:3708:23) at http://localhost:9000/vendor/bower_components/angular/angular.js:6758:28 at link (http://localhost:9000/vendor/bower_components/angular-route/angular-route.js:897:26) at nodeLinkFn (http://localhost:9000/vendor/bower_components/angular/angular.js:6212:13) <div ng-view="" class="ng-scope"> angular.js:9384


What happened is that Grunt uglify task included angular files (angular-route.js in this case).
Minification included in uglify task broke the file by minufying some string that mustn't be minified.

Three solutions :
  • Make the grunt task do not include unwanted files, and include those files already minified in your app.
  • If problem still occurs after first solution, your angular modules are not "uglify friendly". There's a special way to declare your dependencies so that minifying goes smooth, as described on this page ("a note on minification" paragraph) for example. Please note that instead of doing this declaration "by hand", you can use the "ng-min" task that automatize the process and keep your code clean.
  • Well, in my case I still had issue, so I ended turning off the "mangle" option in uglify (that very option that make long strings into smaller to compress response size). You can turn off the option like this :
 uglify: {

            options: {
                mangle: false
            },

Hope this help.

3 comments:

  1. "Start your career by Joining Digital Marketing training with Gateway Techno Solution. We Here providing Digital Marketing training with real time experts
    for more details contact use on gatewaytechnosolutions
    Call Now: 9505066323 or 9505099323 "
    Digital Marketing || Digital Marketing training ||
    Gateway Techno Solutions @ kurnool

    ReplyDelete
  2. RKNews"For Your Latest News Updates Such As Entertainment , Politics, Sports , Lifestyles All
    Under one Umbrilla …"No:7036441765

    ReplyDelete