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?

smac89 · Accepted Answer · 2017-07-01 02:01:11Z

20

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

edited Jul 1, 2017 at 2:01

smac89

43.7k15 gold badges150 silver badges202 bronze badges

answered Jun 17, 2016 at 20:36

Steely

7306 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ajey Over a year ago

Interesting, could you point me to the github repo of this project?

lbrahim Over a year ago

Why use uglify and not use systemjs minify option passed to buildStatic ?

Taku Over a year ago

I cloned this repo and it fails to compile.

Steely Over a year ago

@tsuz The master branch is currently deployed to Heroku and works as is, but if you are running on windows there are known issues.

Taku Over a year ago

@Steely I just cloned the repo and tried to build it but it threw compiling errors. I'm on MacOSX

Gary · Accepted Answer · 2016-06-05 21:13:53Z

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 5, 2016 at 21:13

answered Jun 5, 2016 at 20:51

Gary

8318 silver badges20 bronze badges

4 Comments

user3452805 Over a year ago

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.

Gary Over a year ago

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 Over a year ago

Here's a good article about packaging angular 2 apps.

Ash Over a year ago

I think systemjs-builder includes tree shaking by default now, if you look at the package.json, rollup is a dependency

Collectives™ on Stack Overflow

How can you bundle Angular 2 using System JS Builder?

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related