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

2
votes

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

> Benjamins-MacBook-Pro:public Ben$ npm run build
    > 
    > > [email protected] 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"
  }
}
1
angularecmascript-6babeljs

1 Answers

4
votes

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:

Related: