typescript - Como você usa uma aplicação Angular 2 empacotada no navegador?

Eu tentei compilar todo o código TypeScript em um único arquivo Javascript. Mas sempre que tento importar esse arquivo usando SystemJS, a página fica presa em loading...

Eu uso o gulp para compilar os arquivos TypeScript em um único arquivo JavaScript e então copiá-lo para a pasta dist.

Tarefa do Gulp:

gulp.task("dist:compileTSConcat", function() {
  return gulp.src("./app/**/*.ts")
    .pipe(ts({
      typescript: require('typescript'), // In my package.json I have "typescript": "1.8.2"
      target: 'ES5',
      module: 'system',
      moduleResolution: 'node',
      experimentalDecorators: true,
      emitDecoratorMetadata: true,
      outFile: 'app.js'
    }))
    .pipe(gulp.dest("./dist/"))
})

Código de importação do SystemJS na página da web:

...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.4/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.23/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.23/system-register-only.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>

    <script>
      //System.config({});
      System.import('app.js').then(null, console.error.bind(console));
    </script>
...

Resposta #1

Você deve incluir seu arquivo JS em uma tag script e importar o módulo de ponto de entrada da sua aplicação:

<script src="dist/app.js"></script>
<script>
  System.import('app').then(null, console.error.bind(console));
</script>

Se você inicializar sua aplicação Angular 2 em um arquivo chamado boot.ts localizado na pasta app.