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 libraries that are referenced explicitly in the index.html, e.g:

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

However, I can't figure out how I can bundle Angular 2 itself, or at least the modules required from Angular 2, as they aren't actually referenced in the HTML. How can this be done?

score 20 · Accepted Answer · edited Jul 01 '17 at 02:01

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']);

Interesting, could you point me to the github repo of this project? — Ajey, Jul 20 '16 at 07:28
Why use uglify and not use systemjs minify option passed to `buildStatic` ? — lbrahim, Aug 10 '16 at 14:56
@tsuz The master branch is currently deployed to Heroku and works as is, but if you are running on windows there are known issues. — Steely, Feb 16 '17 at 18:42
@Steely I just cloned the repo and tried to build it but it threw compiling errors. I'm on MacOSX — Taku, Feb 18 '17 at 08:54

Gary · Answer 2 · 2016-06-05T21:13:53.107

3

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.

edited Jun 05 '16 at 21:13

answered Jun 05 '16 at 20:51

Gary

821
8
20

Hi Gary, thanks for the reply. Isn't this what SystemJS Bundler should be doing though? If I were to use Webpack then I wouldn't need to be using SystemJS Bundler, from my understanding. – user3452805 Jun 05 '16 at 22:20
Yes, different tools for generally the same job. Neither systemjs builder nor webpack do a very good job in including es6 modules -and- keeping the payload small. Rollup is the exciting one IMO, with the treeshaking. I was thinking that I would need to create custom scripts to use rollup with my ng2 projects. I was quite excited when Rob Wormald did that ng-conf demo! Angular 2 will have built-in support. – Gary Jun 05 '16 at 23:38
Here's a [good article](https://medium.com/@richavyas/aha-moments-from-ngconf-2016-part-1-angular-2-0-compile-cycle-6f462f68632e#.pvbfyi19r) about packaging angular 2 apps. – Gary Jun 05 '16 at 23:52
1

I think systemjs-builder includes tree shaking by default now, if you look at the package.json, rollup is a dependency – Nodeocrat Sep 15 '16 at 02:59

How can you bundle Angular 2 using System JS Builder?

2 Answers2

Linked

Related