Why uglify not working for my javascript file in gulp

Question

I cannot convince why uglify not working for my app.js (angularjs) file. Here is my part of js file.

(function() {
    'use strict';

    var coursesApp = angular.module('pwaCoursesApp',['ngRoute', 'ngSanitize'])
    coursesApp.config(['$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider){
        $routeProvider
        .when('/', 
            {
                templateUrl: '/home.html',
                controllerAs: 'homeCtrl'
            })
        .otherwise({redirectTo:'/'});
    }]);

    coursesApp.controller('homeCtrl', function($scope, $http) {

    });
})();

and here is my gulp uglify script

gulp.task('scripts', function() {
  var sources = [
    'node_modules/es6-promise/dist/es6-promise.js',
    'app/scripts/app.js',
    ];

  return gulp.src(sources)
    .pipe($.concat('main.min.js'))
    .pipe($.uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe($.size({title: 'scripts'}));
});

and gulp told me that it was successfully uglify but when I render my app it's not working at all and show me that error message.

main.min.js:2 Error: [$injector:unpr] http://errors.angularjs.org/1.3.8/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20homeCtrl
    at http://localhost:3000/scripts/main.min.js:1:6739
    at http://localhost:3000/scripts/main.min.js:1:22851
    at Object.r [as get] (http://localhost:3000/scripts/main.min.js:1:21847)
    at http://localhost:3000/scripts/main.min.js:1:22924
    at r (http://localhost:3000/scripts/main.min.js:1:21847)
    at Object.i [as invoke] (http://localhost:3000/scripts/main.min.js:1:22103)
    at l.instance (http://localhost:3000/scripts/main.min.js:2:10025)
    at http://localhost:3000/scripts/main.min.js:2:1403
    at o (http://localhost:3000/scripts/main.min.js:1:7233)
    at x (http://localhost:3000/scripts/main.min.js:2:1387) <div ng-view="" class="ng-scope">

But not uglify, it's working smoothly. Please let me know what I missed out. Thanks.

Answer 1

This generally happens when you injected your dependencies with the shortcut syntax.

angular
    .module('myapp')
    .controller('myController', function ($rootScope, $location) {

})

is an example of shortcut syntax.

It's bad because dependencies are not written in a string. So when you minify it, it'll become something like

function(a,b)

which obvisouly doesn't work.

Use $inject instead.

See here for more infos.