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
– DAG, Commented Mar 5, 2016 at 9:30
That options belong to SystemJS Builder. Angular2 tutorials don't use SystemJS Builder — Eric Martinez
– Eric Martinez, Commented Mar 5, 2016 at 12:37

Community · Accepted Answer · 2017-05-23 11:54:13Z

5

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?

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 5, 2016 at 12:46

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

2 Comments

DAG Over a year ago

That is brilliant. Thank you very much. As I see in the mentioned post, even the System.config is not needed anymore. YOu know why?

Thierry Templier Over a year ago

You're welcome! In you don't need System.config since with outFile modules are explicitly registered with System.register in the output file. You don't need to make the configuration the correspondance between modules and file names (what is needed without the option)...

Collectives™ on Stack Overflow

Angular2 TypeScript transpiler with Minification / Uglify

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related