Angular 2 + Meteor 1.3: TypeScipt vs ES2015

Angular 2.0 just released beta1 and it supports both TypeScript (ECMAScript 6/2015/2016) and TypeScript.

Meteor 1.3 released beta4 and it supports NPM packages and ES6 modules loader.

It is possible to work with Angular 2.0-beta1 with both transpilers: Meteor’s build it called `ecmascript` (which uses Babel) or TypeScript compiler.

Here are some points regarding to them:

Meteor ECMAScript transpiler (`ecmascript` with Babel):

  • Meteor 1.3 beta version provides the ability to use NPM modules and use ES6 modules loader in order to load both NPM modules and Meteor Atmosphere packages from your ES6 code.
    The Angular2.0-beta1 that installed in this case comes from NPM.
  • At the moment, ecmascript package uses only the “official” extensions of Babel, which means that common things like modules, arrow functions, let, classes, etc are available. 
    In order to use this transpiler with Angular 2.0-beta1 is it required to have “es7.decorators” Babel’s feature available, alongside some other extras that Babel need in order to provide this functionality (called `babelHelpers`).
  • So after some modifications you will be able to use Decorators and you will be able to write some Angular 2.0 code.
    But there are some missing features in ECMAScript that Angular 2.0 requires in order to provide a nice coding experience, such as Parameter Decorators.
  • Angular 2.0 documentation provides JavaScript ES5/ES6 examples, but they are not useful as the TypeScript examples.
  • Also, there are many ES5 examples for Angular 2.0 which are relevant for ES6:
    http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html

TypeScript transpiler (ts-compilers package):

Code Examples:

Using Angular 2.0 Parameters Decorators

TypeScript:

ES6:

OR

The same needed to be done in every Decorator that requires to be used on parameter (such as @Attribute, @Optional, @Host, @Self, @Query)

Examples for all parameter decorators usage in ES6:
https://github.com/shuhei/babel-plugin-angular2-annotations/blob/master/test/integration/parameter-decorator-alternative.spec.js

Using Angular 2.0 @Inject decorator

Angular 2.0 provides a smart dependency injection with a useful annotation named @Inject.
In TypeScript we can just use that decorator with the injectables we need.
In ES2016 we need to provide it again through parameters, or load it manually using the Injector.

TS:

ES6:

Or using parameter decorator:

TS:

Note that in this example, `zone` will be available in all the class’s methods because of the `private` keyword.
In ES6, we need to inject it manually and then put it in `this`: