Gulp uglify breaking angular application

Question

When trying to use gulp-ugily with my angular application, it is breaking, even though I am running it through gulp-ngmin.

Here is the gulp file:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    ngmin = require('gulp-ngmin'),
    uglify = require('gulp-uglify');

gulp.task('compress', function() {
    gulp.src('client/js/source/*.js')
        .pipe(concat('app.js'))
        .pipe(ngmin())
        .pipe(uglify())
        .pipe(gulp.dest('client/js'));
});

Argument 'myController' is not a function, got undefined. Basically a controller. — Justin
– Justin, Commented Jun 26, 2014 at 19:52
Wow, I needed to specify client/js/source/**/*.js is there a way to specify just search reclusively down? — Justin
– Justin, Commented Jun 26, 2014 at 19:54
Be sure you have defined you dependencies in a min-safe manner. The should be in the braces such as : phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);. See docs.angularjs.org/tutorial/step_05 and scroll down the "Notes on Minification". — JerryKur
– JerryKur, Commented Jan 22, 2015 at 17:24

pomber · Accepted Answer · 2015-09-17 19:00:29Z

44

It helps to disable the mangle option in uglify, for it's messing with all the injection stuff and naming.

.pipe(uglify({ mangle: false }))

edited Sep 17, 2015 at 19:00

pomber

24.1k15 gold badges83 silver badges96 bronze badges

answered Jan 22, 2015 at 17:13

beauXjames

8,4283 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Ferraz · Accepted Answer · 2016-06-23 18:12:28Z

32

Maybe answering this for future users, as it seems the post is old.

Use ng-annotate to fix AngularJS problems when uglifying. Install it as any other library:

npm install gulp-ng-annotate --save-dev

And then use this in your gulpfile.js:

var gulp = require('gulp')
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var ngAnnotate = require('gulp-ng-annotate')

gulp.task('js', function () {
  gulp.src(['src/**/module.js', 'src/**/*.js'])
    .pipe(concat('app.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(gulp.dest('.'))
})

Hope this helped!

Source: https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917

answered Jun 23, 2016 at 18:12

Daniel Ferraz

3223 silver badges8 bronze badges

5 Comments

Daniel Ferraz Over a year ago

I use this solution at work and it never failed me! Thanks @PhamHuyAnh!

ben.IT Over a year ago

yeah ! working answer. should be accepted as right answer.

jpmottin Over a year ago

It sounds to me a better solution because, the .js are more uglified than with 'mangle: false' solution.

Zymotik Over a year ago

Note: If using ES6, you may get problems with ngAnnotate as it is no longer supported. For instance, adding an ES6 spread ('...') will cause a parse error.

Daniel Ferraz Over a year ago

I agree @Zymotik! The solution was valid for Angular 1.x in June of 2016! This solution has to be revisited! =) But, I think that webpacks have figured it out for many languages

Collectives™ on Stack Overflow

Gulp uglify breaking angular application

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related