gulp-uglify is creating bad javascript

Question

I am working with AngularJS, and I have my application JS setup like the following.

var userApp = angular.module('userApp',['ngRoute','ngAnimate', 'bw.paging', 'appConfig', 'userControllers']);

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

userApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
}]);

userApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'partials/index.html', 
            controller : 'IndexController' 
        })
        .otherwise({ 
            templateUrl : 'partials/routeNotFound.html', 
            controller : 'NotFoundController' 
        });
}]);

var userControllers = angular.module('userControllers', []);

I then proceed to lint this JS file as follows using gulp.

gulp.task('lint1', function() {
    gulp.src('test.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

I get no errors reported. Next, I proceed to minify this using gulp-uglify.

gulp.task('minify1', function() {
    gulp.src('test.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

I get a minified output. However, when I use the minified output in my html application, I get an AngularJS error. When I beautify the uglified JS back (via jsbeautifier.org), I see the following result.

var userApp = angular.module("userApp", ["ngRoute", "ngAnimate", "bw.paging", "appConfig", "userControllers"]);
userApp.run(function(r, e) {
    r.pagination = {}
}), userApp.config(["$httpProvider", function(r) {
    r.defaults.useXDomain = !0
}]), userApp.config(["$routeProvider", function(r) {
    r.when("/", {
        templateUrl: "partials/index.html",
        controller: "IndexController"
    }).otherwise({
        templateUrl: "partials/routeNotFound.html",
        controller: "NotFoundController"
    })
}]);
var userControllers = angular.module("userControllers", []);

As you can see, there are commas , where there should be semi-colons ;. Is my input JS file bad or did gulp-uglify mess things up? How do I fix this problem?

Answer 1

The problem is not uglify it is your own code. It is breaking Angular's dependency injection;

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

should be

userApp.run(['$rootScope', '$location', function($rootScope, $location) { 
    $rootScope.pagination = { };
}]);

---

Alternatively, you could use ng-annotate which will handle this dependency injection problem for you. https://www.npmjs.com/package/gulp-ng-annotate

Answer 2

we have found the same issue using gulp-uglify and underwood Uglify-js. After a long research we found the problem, gulp-uglify have ha weak dependency on Latest 3.x.x Uglify-js, the new version v3.15.0 start to change beaviours and start to write the js using ',' in the place of ';'.

The minified js probably is correct to, but in hour case the javascript result is non 100% compatible, in a few browsers our code have some issues. We fix it forcing NPM to solve the dependency to v3.14.5 (last with old behavior) with npm-force-resolutions and using package-lock.json.