How to compile an Angular2 TypeScript application to a single file?

Question

I realize that I can compile my application with tsc my_app.ts --target system and it will generate a SystemJS-wrapped file for each imported module, which is awesome, but it generates anonymous (nameless) functions, so I can't just concatenate them to a single file.

I thought about making this question "how to compile TypeScript to named SystemJS modules", but my goal is just to compile my Angular2 app to a single file, SystemJS or not.

Answer 1

The --outFile option works with the --module option (for AMD and SystemJS) since TypeScript 1.8, so this can be done natively. Here's the changelog. TypeScript also automatically pulls all the dependencies that don't reside in external modules, so it's enough to only compile the main app file.

If Angular 2 doesn't switch away from SystemJS, the way to bundle your app in a single file should be as simple as compiling it with options like tsc app.ts --target ES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js

After that it should be possible to bootstrap the application with something like:

<script src="/bower_components/system.js/dist/system-register-only.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/app.js"></script>
<script>
    System.import('app');
</script>