0

I've complete the angular2 tour of heroes. And I wonder what if I'd like to build this project for production. I want to add only 2 files to index.html: appScripts.js and vendorScripts.js. I've compiled my ts files with option outFile so I have my appScripts.js but it doesn't work. Here is some code in my gulpfile: 

gulp.task('compile', ['clean'], function() {

    var tsProject = typescript.createProject('tsconfig.json', {
        outFile: 'app.js'
    });

    var tsResult = gulp.src(['app/**/*.ts'])
        .pipe(typescript(tsProject));
    return tsResult.js
        .pipe(gulp.dest('./dist'));
});

I think it's because, we have loaded some angular models like @angular/core in project ts files, and because of some systemjs stuff..

Is there any solutions?

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
Sergey Tyupaev
  • 1,264
  • 9
  • 23
  • Researching on this too, not much online. Please share if you'll find something. The tour of heroes tutorial app downloads hundreds of files 2.2 Mb in total. There's got to be a way to reduce that for prod deployment. – Maxim Suponya May 22 '16 at 13:15

1 Answers1

0

I've found out the solution. You should compile your ts files to js files and then bundle them via systemjs-builder. Here's my gulp task:

var Builder  = require("systemjs-builder");
gulp.task("builder", function() {

        var builder = new Builder(); 

        builder.loadConfig('./systemjs.config.js')
            .then(function() {
                builder.buildStatic('dist/main.js', 'public/appScript.js')
                    .then(function () {
                        console.log('Build complete');
                    })
                    .catch(error);
            });
});

buildStatic method creates the final javascript file for your application.

Sergey Tyupaev
  • 1,264
  • 9
  • 23