How to create an angular2 production application

Question

I finished angular2 tour of heroes . And I wonder what if I would like to build this project for production. I want to add only 2 files in index.html : appScripts.js and vendorScripts.js . I compiled ts files with outFile parameter, so I have appScripts.js , but it does not work. Here is the 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 because we loaded some angular models, such as @angular/core in the ts project files, and because of some systemjs stuff ..

Are there any solutions?

Answer 1

I have found a solution. You have to compile your ts files into js files and then merge them through systemjs-builder . Here is 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.