How to load minified file in angular 2 using gulp

Question

I have a angular 2 application in which typescript compiler options is defined to generate a single outFile which is Scripts1.js and Scripts1.js.map

Now in my index.html

<script src="Scripts/Script1.js"></script>
    <script>
            System.config({
                packages: {
                    'V1/components/main': {
                        format: 'register',
                        defaultExtension: 'js',
                        defaultJSExtensions: true
                    }
                }
            });
            debugger;
            //System.import('Scripts/main')
            System.import('V1/components/main')
                  .then(null, console.error.bind(console));
        </script>

Which is working fine now How to uglify this using gulp

My gulpFile.js

gulp.task('MinifyBundled', function () {

    console.log('testiang');
    return gulp.src(config.src2)
      .pipe(uglify())
      .pipe(gulp.dest('app/'));

})

which generates Script1.js in my app folder now when I include

<script src="app/Script1.js"></script>

this minified file it is not working and no errors in console . I guess I'm missing map files while uglifying . I tried this

gulp.task('MinifyBundled', function () {

    console.log('testiang');
    return gulp.src(config.src2)
        .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(uglify())
         .pipe(sourcemaps.write('app/'))
      .pipe(gulp.dest('app/'));

})

P.S : Please don't suggest any other bundling or minification tools, I'm sick of all

Answer 1

Better use Angular 2 CLI for developing apps. It provides all baseline works like build, run, unit testing, transpiling of TS files, with NG commands you can create pages, routes with pre-defined code.

Uglify can also be done by changing Angular 2 CLI environment to PROD

Answer 2

If you create bundle from all of your files it would be better to use Webpack and not system.JS (System JS load every module file at runtime while Webpack make a bundle from all your file)

There is a great explanation on how to create a webpack file in the original angular documentation. https://angular.io/docs/ts/latest/guide/webpack.html

Answer 3

Try gulp uglify with mangle option set as false. i.e .pipe(uglify(), {mangle : false})