Angular 2 in ES6 without decorators

With Angular 2 now in beta, it’s definitely time to start playing with it. One of my first questions was: what language to use? The first example in the Angular 2 website says

While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.

Those are the languages officially supported by Angular 2. Dart has lost most of its appeal since they declared it won’t be integrated into Chrome, so I’ll just gloss over it.

Angular 2 itself is written in TypeScript, and so are most of the official examples available so far. I do like TypeScript and it is arguably the best choice for large projects. However it may be overkill for smaller apps or just some quick experiments. Configuring type definitions for existing JavaScript libraries in particular can be a bit of a pain.

ES5 is just… old. If we use JavaScript for a new project today we may as well start with ES6. Surprisingly though I could find very few Angular 2 examples in ES6. And those few typically use decorators, a language feature that is not actually in the ES6 standard but one proposed for ES7. As a result it’s only partially supported by Babel for example.

So, is it actually possible to write Angular 2 components in “pure” ES6, with code similar to the TypeScript examples but without types and decorators?

The first challenge is how to annotate our class as a Component without decorators.  After a few attempts I think this – using the annotations class property – is the closest it can get to the TypeScript version:

import {Component} from 'angular2/core';

let componentAnnotation = new Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
});
export class AppComponent { }

AppComponent.annotations = [componentAnnotation];

The second challenge is how to specify the type of any services we want to inject into our components or other services, since Angular 2 injects by type (not name) and we don’t have type annotations like in TypeScript, or the @Inject decorator at our disposal. In this case the parameters class property does what we want, e.g.:

import {OtherService} from './other.service';

export class MyService {
  constructor(otherService) {
    this._otherService = otherService;
  }
  // other methods using this._otherService...
}

MyService.parameters = [[OtherService]];

I’m still not entirely sure why parameters needs to be an array of arrays, but if you need to inject more than one service you would set it to e.g. [[FirstService], [SecondService]].

With that sort of adaptations I think it is possible to write Angular 2 apps in standard ES6 code. It’s not quite as nice as TypeScript, but it’s not too bad either.

You can find a very simple example I wrote in the process of experimenting with this stuff in this Plunk.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s