How to compile an Angular2 TypeScript application

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

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

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"
  }
}

Answer 3

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>