How can you bundle Angular 2 using System JS Builder?

Question

I\'m currently using System JS with System JS Builder to bundle up my application, its assets, and the libraries that it references. My problem is that I can bundle librarie

Answer 1

Using systemjs-builder you can bundle Angular 2 with your app code and bundle your other libraries separately.

I bundled any library I would reference directly in HTML into a vendors.min.js, and any library referenced through my system.config.js plus app code into an app.min.js. In this example you can see that all the dependencies in Tour of Heroes are loaded into the page in <10 network requests (source code).

// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/semantic-ui/dist/semantic.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/lib/js'));
});

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(tsc({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "public/dist/js",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);

Answer 2

You can use a bundler like Webpack or Rollup (my preference because it does tree-shaking).

The Angular team appears to be putting together some great tooling around Rollup in time for the full release. The day 2 keynote of ng-conf this year discussed and demonstrated the offline compiler. Start watching this at 25:30.