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 aweso

Answer 1

For the web:

1. Use the TypeScript compiler to compile to JavaScript.
2. Use browserify on the JavaScript to combine it to a single file.

An easier way of doing this though is to use tsify. It's a browserify plugin that compiles TypeScript.

Answer 2

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>

Answer 3

You need to tell you tsc compailer where to put your js files after tsc compile (command: tsc -w). The two parameter in the tsconfig.js file tells TypeScript compailer to put all js out put into one file in a directory is

"outDir":"dist/",
"outFile": "dist/app.js"

My full tsconfig.js is as below

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir":"dist/",
    "outFile": "dist/app.js"
  }
}