Babel Outputting Exact Copy of Angular2 File

Question

I am trying to use Babel CLI to compile ES2015 js with Angular 2 (so it has @ decorators) into ES5 so that it can be used by web browsers, but it just creates an exact copy of the file (still uses @ symbols as well as the import key word).

I use npm run build from the terminal to cause babel to create an ES5 version of the boot.js file. Babel is configured in my package.json file like so:

{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "babel": {
        "plugins": [
            "syntax-decorators"
        ]
    },
    "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"
    }
}

Here is the actual JS file I am trying to compile to ES5:

'use strict';
import {Component, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app',
  template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyApp {
  constructor() {
    this.name = 'Max';
  }
}

bootstrap(MyApp)

Here is the error in the browser console:

Uncaught SyntaxError: Unexpected token import
boot.js:2 Uncaught SyntaxError: Unexpected token import

I am using visual studio code as my IDE. Here is my jsconfig.json file to configure visual studio code:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "experimentalDecorators": true
    }
}

Answer 1

Unfortunately babel 6 still has some issues, for example failing silently when a plugin is not found.

Install the following plugins:

• babel-plugin-syntax-decorators
• babel-plugin-transform-decorators

Include transform-decorators plugin too in the options:

"plugins": [
    "syntax-decorators",
    "transform-decorators"
]

Most likely you will need a module transformer as well

---

But all of this is superfluous if your code is eventually TypeScript.

Answer 2

I have since realised my code is typescript, not ES6 javascript. This is most likely the issue.