To deploy the angular 2 application for production, we must bundle it to make the application to run faster. Here are the steps for bundling the application using systemjs builder and gulp task
Include the following in the devDependencies of package.json file
"devDependencies":{
...
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-html-replace": "^1.6.1",
"gulp-shell": "^0.5.2",
"lite-server": "^2.2.2",
"run-sequence": "^1.2.2",
"systemjs-builder": "^0.15.31",
}
Create vendor.ts file inside the app folder with the following contents
import 'core-js-shim';
import 'zone';
import 'reflect';
Include these libraries in the map section of systemjs.config.js to bundle it
map: {
...
'text': 'plugin-text.js',
//shims
'core-js-shim':'npm:core-js/client/shim.min.js',
'zone':'npm:zone.js/dist/zone.js',
'reflect':'npm:reflect-metadata/Reflect.js'
}
Create plugin-text.js with the following contents to bundle the html files
exports.translate = function(load) {
if (this.builder && this.transpiler) {
load.metadata.format = 'esm';
return 'exp' + 'ort var __useDefault = true; exp' + 'ort default ' + JSON.stringify(load.source) + ';';
}
load.metadata.format = 'amd';
return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});';
}
Create a gulpfile.js file with the following contents to bundle the dependencies
var gulp = require('gulp');
var shell = require('gulp-shell');
var clean = require('gulp-clean');
var htmlreplace = require('gulp-html-replace');
var runSequence = require('run-sequence');
var Builder = require('systemjs-builder');
var builder = new Builder('', 'systemjs.config.js');
var bundleHash = new Date().getTime();
var mainBundleName = bundleHash + '.main.bundle.js';
var vendorBundleName = bundleHash + '.vendor.bundle.js';
// This is main task for production use
gulp.task('dist', function(done) {
runSequence('clean', 'compile_ts', 'bundle', function() {
done();
});
});
gulp.task('bundle', ['bundle:vendor', 'bundle:app'], function () {
return gulp.src('index.html')
.pipe(htmlreplace({
'app': mainBundleName,
'vendor': vendorBundleName
}))
.pipe(gulp.dest('./dist'));
});
gulp.task('bundle:vendor', function () {
return builder
.buildStatic('app/vendor.js', './dist/' + vendorBundleName)
.catch(function (err) {
console.log('Vendor bundle error');
console.log(err);
});
});
gulp.task('bundle:app', function () {
return builder
.buildStatic('app/main.js', './dist/' + mainBundleName)
.catch(function (err) {
console.log('App bundle error');
console.log(err);
});
});
gulp.task('compile_ts', ['clean:ts'], shell.task([
'tsc'
]));
gulp.task('clean', ['clean:ts', 'clean:dist']);
gulp.task('clean:dist', function () {
return gulp.src(['./dist'], {read: false})
.pipe(clean());
});
gulp.task('clean:ts', function () {
return gulp.src(['./app/**/*.js', './app/**/*.js.map'], {read: false})
.pipe(clean());
});
Finally include the generated js in the index.html file, the index.html may look like
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<my-app>Loading...</my-app>
<script src="dist/1474222768447.vendor.bundle.js"></script>
<script src="dist/1474222768447.main.bundle.js"></script>
</body>
</html>
