Angular -ui-router breaks when reset with gulp

Question

I have the following simple angular.js application following the best practices described here .

angular .module('myApp', ['ui.router']); (function() { function routes($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/404"); $stateProvider .state('createCluster', { url: '/create-cluster', templateUrl: 'templates/create-cluster.html' }) } angular .module('myApp') .config(routes); })(); 

I use gulp to concatenate all JavaScript files, including angular-ui-router.js , and run everything through uglify after. When I dodge, I get:

Unprepared error: [$ injector: modulerr] Unable to create myApp module due to:
Error: [$ injector: unpr] Unknown provider: e

When I delete dodging, everything works. How can I get uglification so as not to break ui-router ?

Here is my gulp task:

 gulp.task('uglify-js', function () { gulp.src(['client/js/libraries/**/*.js', 'client/js/source/**/*.js']) .pipe(concat('app')) .pipe(ngAnnotate()) .pipe(uglify()) .pipe(rename({ extname: ".min.js" })) .pipe(gulp.dest('client/js'))' }); 

Answer 1

One simple thing to get this working without changing all your code is to set the mangle uglify parameter to false as follows:

 gulp.task('uglify-js', function() { gulp.src(['client/js/libraries/**/*.js', 'client/js/source/**/*.js']) .pipe(concat('app')) .pipe(ngAnnotate()) .pipe(uglify({ mangle: false })) .pipe(rename({ extname: '.min.js' })) .pipe(gulp.dest('client/js')); }); 

Saves names, so you won’t have problems with injections.

Answer 2

You must use ngannotate . This is still preprocessing your angular code to make it safe for uglify / minification. Ngannotate adds dependency annotations, so the minifier does not break your dependency injection.

angular documentation contains a note on this:

Since angular defines the dependencies of the controller on the argument names of the controller constructor function, if you want to minimize the JavaScript code for the PhoneListCtrl controller, all its function arguments will also be reduced, and the dependency injector will not be able to correctly identify the services. We can overcome this problem by annotating a function with dependency names provided as strings that will not be minimized.

Ngannotate makes this process for you, making your code cleaner.

Ngmin is now deprecated, and github advises using ngannotate. It is also faster than ngmin.

Answer 3

See generated code. The problem with minimizing AngularJS is that dependency nesting is based on parameter names and, as such, will break when minimized.

For example, this line

 function routes($stateProvider, $urlRouterProvider) { 

may look like

 function routes(a, b) { 

and then Angular will not know which dependency to inject, and you will get an Unknown provider error.

To fix this, you can use array syntax (see Inline Array Annotation).

 ['$dependencyA', '$dependencyB', function($dependencyA, $dependencyB) 

because minified will look like

 ['$dependencyA', '$dependencyB', function(a, b) 

and then Angular knows what to do.

In your case, it will be something like

 .config(['$stateProvider', '$urlRouterProvider', routes]); 

Answer 4

Try this so that minimization does not spoil the injection:

 var routes = function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/404"); $stateProvider .state('createCluster', { url: '/create-cluster', templateUrl: 'templates/create-cluster.html' }) }; routes.$inject = ['$stateProvider','$urlRouterProvider']; angular .module('myApp') .config(routes); 

Answer 5

Just found a solution.

Or, even better than manually defining dependencies using $inject , use the built-in @ngInject ngAnnotate in gulp ngAnnotate .

 angular .module('myApp', [ 'ui.router' ]); (function() { /** * @ngInject */ function routes($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/404"); $stateProvider .state('createCluster', { url: '/create-cluster', templateUrl: 'templates/create-cluster.html' }) } angular .module('myApp') .config(routes); })(); 

Answer 6

Don't forget your @ngInject comment on the function, I'm working on getting a link to the auto-function by landing in a future version of ng-annotate, if you could join, and +1 here would be awesome: https://github.com/ olov / ng-annotate / issues / 57