Sergey Tyupaev Sergey Tyupaev - 6 months ago 568
AngularJS Question

How to build angular2 app for production

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

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.