How do I write angular2 without decorator syntax?

Question

I\'m roughly following JavaScript/TypeScript quickstart for Angular2 to write my app in ES6 but can\'t get the decoractor to works

entry.j

Answer 1

You can use ES5 syntax:

import * as ng from 'angular2/core';

const SomeComponent = ng
.Component({ /* ... */})
.View({ /* ... */ })
.Class({
    constructor() {}
});

const SomeDirective = ng
.Directive({ /* ... */ })
.Class({
    constructor() {}
});

So for your case it will be (see this plunk):

export const AppComponent = Component({
  selector: 'my-app',
  template: '<h1>Hello {{ name }}</h1>'
})
.Class({
  constructor() {
    this.name = 'Max';
    console.log(this.name);
  }
});

PS But if I were you, I would try to resolve the problem and continue to use ES7 decorators. Maybe you've forgotten to do npm install?

Answer 2

It is because you are using Babel 6 and decorators are currently disabled for it, but you can make it work with the legacy plugin transform-decorators-legacy. The reason for disableing is that the syntax will change in the near future. https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy