Angular2 "Getting Started" deployment with SystemJS

Question

Kind of new to this whole SystemJS thing so I might be totally gleaming over the important parts in it's docs. I am pretty familiar with bundling things using Browserify but this whole SystemJS has me scratching my head when it comes to deployment. No pun intended because I am loving SystemJS otherwise.

Given the following from with the config file having the same config from the Angular2 5 minute quickstart:

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script src="app.config.js"></script>
<script>
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

And the following from my Gulpfile using SystemJS Builder:

gulp.task('system-builder', function (cb) {
    var builder = new Builder('./production/public/', './production/public/app.config.js');
    fs.copy('./client/node_modules', './production/public/node_modules', function(err) {
        builder.bundle('./production/public/js/app/app.boot.js', './production/public/js/app/app.js')
        .then(function() {
            console.log('Build complete');
            cb();
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
    });
});

I now have a single app.js file. Going back to the HTML file how do I use the application code in a bundled state? Because I get an angular2-polyfills.js:322 Error: SyntaxError: Unexpected identifier error when making the following update. Note that I have replaced app.config.js with /js/app/app.js:

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script src="/js/app/app.js"></script>
<script>
    System.import('/js/app/app.boot').then(null, console.error.bind(console));
</script>

I have a seen a million and one hits on just using JSPM but I want to know how SystemJS natively handles this before make decisions on using more libraries.

Answer 1

Okay figured this out.

Basically, you shouldn't need to do anything to the html file and can simply stay as is.

However, I needed to make SystemJS Builder self executing by using build.buildStatic instead of build.bundle

So ... the following works:

JS

gulp.task('system-builder', function (cb) {
    var builder = new Builder('./production/public/', './production/public/app.config.js');
    fs.copy('./client/node_modules', './production/public/node_modules', function(err) {
        builder.buildStatic('./production/public/js/app/app.boot.js', './production/public/js/app/app.js')
        .then(function() {
            console.log('Build complete');
            cb();
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
    });
});

HTML(just leave as it is in dev mode)

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script src="app.config.js"></script>
<script>
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>