Gray Fox Gray Fox - 2 months ago 12
TypeScript Question

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

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

The --outFile option works with the --module option 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>