gulp uglification throwing error for Angular2

Question

Some Background

I am using gulp as my task runner for this angular2 application I am working on. This app also uses angular's material design libraries. I am also using Hammer.js for mobile gesture support. All this is done in VS2015 update 3.

Problem Area

This is a partial snippet of my gulp script which is causing a problem

var ts = require('gulp-typescript');
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task("scripts", () => {
    gulp.src([
            'core-js/client/**',            
            'systemjs/dist/system.src.js',
            'reflect-metadata/**',
            'rxjs/**',
            'zone.js/dist/**',
            '@angular/**',
            'jquery/dist/jquery.*js',
            'bootstrap/dist/js/bootstrap.*js',
            '@angular2-material/**/*',
            'lodash/*.js'
    ], {
        cwd: "node_modules/**"
    })
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('lib-min'))
        .pipe(rename('scripts.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('lib-min'))
        .on('finish', function() {
            console.log('Done!');
            process.exit(0);
        });
});

I get an error when I include the pipe to uglify() The Concatenation works just fine. The error I get is:

events.js:141
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript
    at createError (C:\my-web\node_modules\gulp-uglify\lib\create-error.js:6:14)
    at wrapper (C:\my-web\node_modules\lodash\_createHybrid.js:87:15)
    at trycatch (C:\my-web\node_modules\gulp-uglify\minifier.js:26:12)
    at DestroyableTransform.minify [as _transform] (C:\my-web\node_modules\gulp-uglify\minifier.js:76:19)
    at DestroyableTransform.Transform._read (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:147:83)
    at doWrite (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:313:64)
    at writeOrBuffer (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:302:5)
    at DestroyableTransform.Writable.write (C:\my-web\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:241:11)
    at Transform.ondata (_stream_readable.js:542:20)
Process terminated with code 1.

When I change the gulp task to this below everything works fine and the application works as intended in the browser.

gulp.task("scripts", () => {
    gulp.src([
            'core-js/client/**',            
            'systemjs/dist/system.src.js',
            'reflect-metadata/**',
            'rxjs/**',
            'zone.js/dist/**',
            '@angular/**',
            'jquery/dist/jquery.*js',
            'bootstrap/dist/js/bootstrap.*js',
            '@angular2-material/**/*',
            'lodash/*.js'
    ], {
        cwd: "node_modules/**"
    })
        .pipe(gulp.dest('lib-min'))
        .on('finish', function() {
            console.log('Done!');
            process.exit(0);
        });
});

It seems like gulp minification (uglify) is running into issues when coming across angular2 libraries. Does anyone have a working example of using gulp for minifying Angular2 libraries? libraries for eg. would be @angular, @angular2-material, systemjs', hammer.js, rxjs How do I uglify with gulp? I want to reduce the figures in the image below.

Answer 1

You should be using module loading via systemjs. Then you just worry about bundling up your own files.

Example systemjs.config.js

(function (global) {
System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/',
        'bower': 'bower_components/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        app: 'app',
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        // other libraries
        'rxjs': 'npm:rxjs',
        'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './app/main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
        }
    }
});
})(this);

In your script I also believe

changing 'rxjs/' to 'rxjs//*.js' would also work (for this specific case)

Answer 2

I've just noticed that nobody talked about is the code you're trying to compress/uglify contains code in ES6/ES2015.

UglifyJs2 has no support to handle ES6/ES2015 minification. However, Harmony branch of UglifyJs2 does handle it.

Try to replace uglify-js reference in your package.json with the following. It worked with my solution.

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",

Hope it helps!