Front End - Angular 2

Angular 2 package

Angular 2 uses systemjs as the module loader to load user’s modules as well as the dependent libraries. It does not import all the dependencies into memory at the beginning but only loads one when it is needed. Whenever systemjs loads a module, it uses its config file to locate the path of the module and then initiate a XHR request to load it. The dynamic loading mechanism is very beneficial for developers because it allows them to only load the modified code. But it brings two problems in the production environment.

  • The XHR requests create extra network traffic which may slow down the entire application especially for those who only have limited bandwidth.
  • An Angular 2 application usually defines dozens of third party dependencies which internally may rely on other libraries. It is very difficult to make a proper and clean deployment.

To solve the problems, we would like to package the application along with all the dependencies to a single file and load it once in the index.html.

Preparation

1
npm install systemjs-builder --save-dev

  • Install gulp

    1
    2
    npm install --global gulp-cli
    npm install gulp --save-dev

  • Create a task in gulpfile.js as the following
    Assume all the application codes are under “app” folder and the main entry file is main.js. The file systemjs.config.js is the config file for systemjs.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var gulp = require('gulp');
    var Builder = require('systemjs-builder');
    gulp.task('app', function () {
        var builder = new Builder('.', './systemjs.config.js');
        builder.bundle('app/main.js', './dist/main-min.js', {minify: true, mangle: true})
               .then(function () {
                  console.log('Build completed');
                })
                .catch(function (err) {
                    console.log('Build failed');
                    console.log(err);
                });
    });

  • And run the task

    1
    gulp app

It eventually generates a minified file main-min.js under the dist folder, we just inculde it in the index.html and it is good to go.

1
<script src="dist/main-min.js"></script>

Sometimes, in order to speed up the build process, we want to create one package for the barely changed dependencies and another package for the frequently modified applications code respectively. So we need to split the above task into two tasks.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//build main-dep-min.js that only contains the dependencies of the main application
gulp.task('app-dep-build', function () {
    var builder = new Builder('.', './systemjs.config.js');
    builder.bundle('app/**/*.js - [app/**/*]', './dist/main-dep-min.js', {minify: true, mangle: true})
           .then(function () {
             console.log('Build dep complete');
           })
           .catch(function (err) {
             console.log('Build error');
             console.log(err);
    });
});
//build a main-app-min.js that contains the main application without the dependencies
gulp.task('app-build', function () {
    var builder = new Builder('.', './systemjs.config.js');
    builder.bundle('[app/**/*.js]', './dist/main-app-min.js', {minify: true, mangle: true})
           .then(function () {
             console.log('Build app complete');
           })
           .catch(function (err) {
             console.log('Build error');
             console.log(err);
           });
});