Angular2 TypeScript transpiler with Minification / Uglify

Question

I'm developing a web application in Visual Studio 2015 with Angular2 and TypeScript. I'm using Gulp to generate distributed minified js files. With Angular2 I see, that there is no need to transpile TypeScript neither with Visual Studio nor with Gulp asSystemJs does it when importing the module.

Now is the question:

How does SystemJs work with minification, uglification and so on?

System.import('app/main').then(null, console.error.bind(console));

How do I minify or uglify this?

Analyzing a bit more, I see that System.config has a property named bundle, where I can bundle my multiple modules. I didn't find but anything about uglifying. — DAG
That options belong to SystemJS Builder. Angular2 tutorials don't use SystemJS Builder — Eric Martinez

Thierry Templier Thierry Templier · Accepted Answer · 2016-03-05T12:46:01

SystemJS is

Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.

In fact, there are two ways to use SystemJS:

Transpile your TypeScript files within the browser. This means that SystemJS loads your modules, it load corresponding TypeScript files and transpile them on the fly. The following configuration can be used in this case:

<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      'app': {
        defaultExtension: 'ts'
      }
    } 
  });
  System.import('app/main')
     .then(null, console.error.bind(console));
</script>

Use previously transpiled files. In this case, you need to use a TypeScript compiler to generate JS files from the TypeScript ones. These JS files directly rely on the SystemJS API to register and import modules.
```
<script>
  System.config({
    packages: {
      'app': {
        defaultExtension: 'js'
      }
    } 
  });
  System.import('app/main')
     .then(null, console.error.bind(console));
</script>
```

This question could also help you:

Development on Angular2 with TS but without NPM

That's for the context. Regarding your question, it seems that you use the first option. To answer your question, minifying things only makes sense for the second option. As a matter of fact, this corresponds to optimize the elements to load for your applications (number of network calls, sizes of files). Since you use compiled JS files for this option you can minify / uglify them. If you want to create only one JS file, you could consider the outFile property of the TypeScript compiler.

See this question for more details:

How to combine (minify) compiled Angular 2 components?

Angular2 TypeScript transpiler with Minification / Uglify

1 Answers