Angular2 ES6/ES2015 Babel - Syntax error with Angular 2 @ symbol

Question

Babel CLI is giving me this error whilst running it in the terminal:

> Benjamins-MacBook-Pro:public Ben$ npm run build
    > 
    > > angular2-quickstart@1.0.0 build /Users/Ben/Development/whatwegrowangular2/public
    > > babel boot.js -d lib
    > 
    > SyntaxError: boot.js: Unexpected token (5:0)   3 |    4 | //
    > Annotation section
    > > 5 | @Component({
    >     | ^   6 |   selector: 'my-app',   7 |   template: '<h1>Hello {{ name }}</h1>'   8 | })

I am using ES6/ES2015, and Angular 2.

Visual studio code is my development environment.

Any Ideas on the issue? The error is on the "@" symbol just before component.

Package.json file:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server",
    "build": "babel boot.js -d lib"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "babel-cli": "^6.3.17",
    "lite-server": "^1.3.1"
  }
}

Answer 1

You need to enable ES7 decorator support

Support for @Class decorators (ie the cause of your error) can be enabled the option flags.

$ babel --optional es7.decorators

Decorators are used extensively in Typescript to allow the language to mimic the characteristics of traditional statically typed OOP languages. @Class decorators act as a higher order factory function, @Property decorators allow the use of getters/setters in JS, etc.

Angular2 uses them extensively because it's written in Typescript. Despite that, decorators are only at the ' proposal ' stage of possibly being included in the future ES7 specification .

Source:

• Exploring Decorators - Medium

Related:

• How Can I Use Decorators Today