How to build angular2 app for production

Question

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?

Answer 1

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.