Angular2 "Getting Started" mit SystemJS

Question

Irgendwie neu an dieser ganzen SystemJS-Sache, so dass ich die wichtigen Teile in der Dokumentation vollkommen durchschimmern werde. Ich bin ziemlich vertraut mit der Bündelung der Dinge mit Browserify, aber dieses ganze SystemJS hat mich am Kopf kratzen, wenn es um die Bereitstellung geht. Kein Wortspiel beabsichtigt, weil ich sonst SystemJS liebe.

die aus mit der Konfigurationsdatei folgende Bei gleicher Konfiguration von der Angular2 5 Minuten Schnellstart mit:

<!-- 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> 

und die folgenden von meinem Gulpfile 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); 
     }); 
    }); 
}); 

ich jetzt habe eine einzelne app.js-Datei. Zurück zur HTML-Datei Wie verwende ich den Anwendungscode in einem gebündelten Zustand? Weil ich einen angular2-polyfills.js:322 Error: SyntaxError: Unexpected identifier Fehler bekomme, wenn ich das folgende Update mache. Beachten Sie, dass ich app.config.js mit /js/app/app.js ersetzt haben:

<!-- 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> 

Ich habe eine Million und ein Treffer gesehen auf nur JSPM verwenden, aber ich möchte wissen, wie SystemJS diese nativ behandelt bevor Sie Entscheidungen über die Verwendung von mehr Bibliotheken treffen.

Answer 1

Okay, das herausgefunden.

Grundsätzlich sollten Sie nichts mit der HTML-Datei zu tun haben und können einfach so bleiben wie es ist.

aber ich brauchte SystemJS Builder selbst ausführen, indem Sie build.buildStatic statt build.bundle

So ... die folgenden Werke zu machen:

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 (nur lassen, wie es ist im Dev-Modus)

<!-- 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>