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.

@EricMartinez Unfortunately, the --out/--outFile option does not work with the --module option (eg. if you have imports) github.com/Microsoft/TypeScript/issues/1544 — Gray Fox
– Gray Fox, Commented Oct 18, 2015 at 18:51
I've posted an updated answer, since TypeScript added this functionality in version 1.8 — Gray Fox
– Gray Fox, Commented Nov 28, 2015 at 21:46

Gray Fox · Accepted Answer · 2016-10-13 08:24:31Z

10

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>

edited Oct 13, 2016 at 8:24

answered Nov 28, 2015 at 21:44

Gray Fox

6731 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny Bullis Over a year ago

Can't we do this in a tsconfig.json file?

David Sherret · Accepted Answer · 2015-10-18 19:17:42Z

4

For the web:

Use the TypeScript compiler to compile to JavaScript.
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.

answered Oct 18, 2015 at 19:17

David Sherret

108k28 gold badges197 silver badges190 bronze badges

Comments

Aniruddha Das · Accepted Answer · 2016-10-06 20:50:40Z

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

answered Oct 6, 2016 at 20:50

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related