Uglify fails - Unknown provider: aProvider <- a

[mastix]

Hi guys,

I ran into an issue yesterday when I've added the angular-bootstrap JS to my project (which has been set up using the Yeoman Angular Generator) and then it failed due to uglification.

I've added the lib via bower (uncompressed!) and it got included into the vendor.js for concatination and minification.

When the file (ui-bootstrap-tpls.js; uncompressed) is concatenated and bundled in one big vendor.js, everything looks fine, but as soon as the uglify task kicks in (with mangle: true = default), this fails (although the grunt ngmin task should rewrite the code to use Angular's inline annotation method):

The error message was pretty much this one:

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

Pretty much like this bug: yeoman/generator-angular#378

Is this a bug in the angular-bootstrap code and how it's implemented?
Does anybody have an idea why this is happening and how it can be fixed (without turning mangle off)?

Just a hint would be cool! 👍

I've set mangle to false in the uglify.js code... and everything works fine, but I'd really like to turn it back to true again. :)

Regards,

mastix

[fno]

I've encountered this problem literally 5 minutes ago too without any idea.

[mastix]

Haha... what a coincidence! :) You can set mangle to false, so variable names won't be shortened, then everything should work... but that leads to bigger JS files... :(

[pkozlowski-opensource]

@mastix @fno this problem does not happen with the minified version we are providing, check our demo page: http://angular-ui.github.io/bootstrap/

I'm not sure what are the exact minification steps you are taking, but if you can prepare a minimal project showing that uglify is breaking our deliverables I can surely take a look. Otherwise this one is hardly actionable....

[pkozlowski-opensource]

OK, here is more info: http://stackoverflow.com/questions/17238759/angular-module-minification-bug

and what can be done on the library level:
https://github.com/gruntjs/grunt-contrib-uglify#no-mangling

I don't think we can do anything meaningful in the library so I'm going to close this issue. Will be happy to re-open if you guys think there is anything actionable on our side.

[mastix]

Hi,

sure, as soon as mangling is disabled, everything is cool, but that also increases the file size a lot.

I'm using ng-min before uglify (also on angular-bootstrap), but for some reason all of my controllers and included js files work fine, but the ui.bootrap file does not.

ng-min does the following:

angular.module('whatever').controller('MyCtrl', function ($scope, $http) { ... });

gets turned into:

angular.module('whatever').controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);

Now minifiers can handle AngularJS's dependency injection annotations since the attributes are added as string params in the array... but for some reason that does not work for angular-bootstrap.

So there might be actually something to check on your side!?

Thanks for your reply & help!!!

mastix

[pkozlowski-opensource]

@mastix our deliverables already got all the minification-safe annotations (if you can spot places where it is not the case it is a bug that should be fixed - but I don't think so since the minified version we provide does work) so there is no reason to pass this code through the ng-min. This might actually cause problems.

Then, I'm not saying that some parts of our code make it uglify - unfriendly. If this is the case I'm all for fixing things. But in order to act we need to know which part of the code is causing problems.

@mastix @fno for now I assume that this is your custom build that is causing problems here, but I would like to be proven otherwise. So if you see anything strange please do let us know.

[fno]

i dont know about the "custom" build as it seems to stem from a very popular approach using yeoman, bower and grunt while using the angular-generator.

when you install angular-bootstrap via bower into this setup, the ui-bootstrap-tpls.js is automatically added to the whole vendor.js pipeline (ngmin, uglify, etc) ... this seems to be the root cause of this.

so to reproduce:

npm install -g yo
npm install -g generator-angular
bower install angular-bootstrap
grunt && grunt serve

as im fairly new to the js/angular ecosystem it seems not quite obvious as to where to place this problem exactly.

thanks for your time.

[mastix]

Don't have a solution yet... :( Kind of postponed it, until there's one available. This must be fixed before my project goes live - can't deliver my js with the long variable names! :)

[fno]

well you could move the ui-bootstrap-tpls.js out of the uglify/concatenation block in your index.html

[mvhecke]

What worked for me is to exclude Angular itself from the mangling if you concatenate everything into one file. I'm not sure if it's going to work in your case, but you could give it a try.

Grunt

grunt.initConfig({
  uglify: {
    options: {
      mangle: {
        except: ['angular']
      }
    }
  }
});

Gulp

.pipe(uglify({
    mangle: {
        except: ['angular']
    }
}))

[pkozlowski-opensource]

@mastix @fno I would really love to help here but you need to help me to help you... Couple of things:

• there is really, really no reason to run our deliverables through ng-min. I guess this is what is causing your issues;
• if you need assistance please, please provide minimal reproduce scenario in plunker - or just post a gist of the file you are trying to load.

[mastix]

@pkozlowski-opensource It's hard to upload it somewhere since it's kind of a process (grunt -> that minifies files) and not a resulting file.

I don't think that this is a "real" problem with your files, all I know is that when we I use ngmin on my files, they're getting converted correctly, so uglifying works like a charm there. You're file is part of this process as well (and I have no idea how to exclude it from the ngmin-step) and so ngmin is being called for that file as well.

I don't want this file to be served with a single request... it should be packaged into the whole js file.

It would be great if someone had an idea.

Thanks guys!