3

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"
  }
}
Oleksii Pavlenko
  • 1,327
  • 1
  • 11
  • 25
BeniaminoBaggins
  • 11,202
  • 41
  • 152
  • 287

1 Answers1

4

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:

Community
  • 1
  • 1
Evan Plaice
  • 13,944
  • 6
  • 76
  • 94
  • Thanks. I'm getting a `command not found` error in the terminal for `babel`. I have babel installed but have never used it with a `babel` command in a terminal. I cause it to run by adding it to my package.json file and then I go to the terminal and type npm run build from the directory of my package.json file. Where should I type your answer into? – BeniaminoBaggins Jan 01 '16 at 21:01
  • 1
    @user3935156 It looks like Babeljs has changed config since the article I linked was posted. You'll need to install the decorators plugin and enable it in the config. https://babeljs.io/docs/plugins/ – Evan Plaice Jan 01 '16 at 23:31
  • Cheers. I installed the decorator plugin got it configured and outputting a file. However the file it outputs is exactly the same as the input file. My browser console still complains about the import statement: `Uncaught SyntaxError: Unexpected token import`. It is really a seperate issue so I will mark this as the answer. My new question is http://stackoverflow.com/questions/34560592/babel-outputting-exact-copy-of-angular2-file – BeniaminoBaggins Jan 01 '16 at 23:43
  • @user3935156 You need an es6-module-loader polyfill to use import. System.js is probably your best bet. – Evan Plaice Jan 02 '16 at 02:24