Why is uglify not working on AngularJS content?

Question

I've built some gulp tasks to help build my web project. In one of them, I am minifying js files. Here is the task :

gulp.task('minify' , function() {
  console.log('Copy minified js ');
    return gulp.src('dist/www/**/*.js'])
    .pipe(uglify().on('error', function(e){
        console.log(e);
        }))
    .pipe(gulp.dest('dist/www'));
});

When i execute my task : gulp minify I get the following error :

{ [Error: E:XXXXXX\dist\tmp\bootstrap.js: SyntaxError: Unexpected token: name (mainModule)]
  message: 'E:XXXXXX\\dist\\tmp\\bootstrap.js: SyntaxError: Unexpected token: name (mainModule)',
  fileName: 'E:XXXXXX\\dist\\bootstrap.js',
  lineNumber: 1,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (E:XXXXXX\gfgfgfgf\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (

Here the bootstrap.js file :

import mainModule from './src/main';

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainModule.name], { strictDi: true });
});

What's happening? Could someone help me by explaining why it doesn't work?

Thanks you!

Answer 1

Before you can uglify Angular components, you need to add Angular dependency injection annotation. You can pipe through ng-annotate before piping through uglify.

Edit: Also, there are known issues with uglifying ES6 javascript. If you are using ES6 syntax, you should pipe your code through Babel before uglifying it.

Hope this helps!