Angular2的System.config-使用JavaScript还是打字稿？

Question

I'm just wading into setting up an Angular2 app and I'm not sure what is the best way to configure the index.html. I have two examples to go from: a javascript version and a typescript version. Since Angular2 is using typescript I thought the typescript version makes sense. The javascript version is coming from the new Angular2 book from Ari Lerner. Here are the 2 examples:

Typescript configuration:

System.config({
    transpiler: 'typescript',
    typescriptOptions: {emitDecoratorMetadata: true},
    packages: {app: {defaultExtension: 'ts'}}
});
System.import('app/app');

Javascript configuration:

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app/app.js')
    .then(null, console.error.bind(console));

My question is which one is the best to use, and why?

Answer 1

Angular2 app can be written with Typescript Or ES5/ES6 . While learning angular2, you must have found that angular2 website provides two kinda docs (actually three), check now if you haven't (you will be able to see Angular2 for Typescript , Angular2 for Javascript , Angular2 for Dart .

Now it is up to you for which platform you are going to write your Angular2 app.

1) . If you plan to write angular2 app with typescript , obviously your targeted web browser won't understand it and so some mechanism has to convert typescript code into javascript that can be understood by targeted web-browswer. So first snippet of code means convert/transpile .ts file into .js so your browser will be to understand.


2) . If you plan to write angular2 app with Javascript/ES5/ES6 then of course, second part of your question.

Suggestion : Go with first as Angular2 itself has been written in typescript from the scratch .

Answer 2

First, I think that there is a small mistake in the JavaScript configure:

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app/app'); // <------
  .then(null, console.error.bind(console));

Regarding your question:

I think that first configuration (transpiling on the fly) is fine for small applications where performances dosn't matter . As a matter of fact, there are some additional processing (in the browser) to transpile the application code into something executable by the browser at the level of module loading. Such approach is fine for applications executed in plunkr.

I would say that the JavaScript configuration that leverages pre compilation of TypeScript content is more efficient since the browser directly execute module code in JavaScript (no transpiling done by the browser itself).

That said, if you want to have something really efficient (production read application), you need to package your application:

• 1) to precompile your TypeScript code into JavaScript
• 2) to gather JavaScript code into a minimum set of JS files to minimize the number of files to load
• 3) to minify JavaScript code to reduce its size

The first approach doesn't allow all these three points. The second approach allows precompilation and minification but you can't gather your whole application code into a single file.

To do that you need to leverage the outFile parameter of the tsc compiler. This way you will have all modules into a single file that you can minify. In this case, you don't need anymore to configure SystemJS. You need to import the main module...

These questions could give you additional hints:

• How to combine (minify) compiled Angular 2 components?
• Angular2 TypeScript transpiler with Minification / Uglify