Aurelia Dependency Injection Decorator Not Working

Question

I'm having a problem getting the @inject decorator to work when using Aurelia (framework v 0.17, dependency-injection v 0.11.2); I receive an Unexpected Token error on the decorator. I've tried both Chrome 46 and FF Dev 44.0a2, both report the same error. I have experimental javascript features enabled in Chrome. Injection works just fine when I use the static method option. I also have Babel 5.8 for the transpiler.

Here is my app.js:

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient) // DI fails with decorator
export class App {

    constructor(http) {
        http.configure(config => {
            config
                .withHeader("Accept","application/json")
                .withBaseUrl("http://localhost/projects/api/");
        })
        this.http = http;
    }

    //static inject() { return [HttpClient]; }  // DI works fine with inject method

    activate() {
        return this.http.get("Project/Projects")
                        .then(response => {
                            this.projects = response.content;
                        });
    }

}

Here's the error from Chrome:

Error: http://localhost:8088/app.js: Unexpected token (4:0)
  2 | import {HttpClient} from 'aurelia-http-client';
  3 | 
> 4 | @inject(HttpClient)
    | ^
  5 | export class App {
  6 | 
  7 |     constructor(http) {
    Error loading http://localhost:8088/app.js
    at Parser.pp.raise (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:62826:13)
    at Parser.pp.unexpected (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:64056:8)
    at Parser.pp.parseDecorator (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63295:10)
    at Parser.pp.parseDecorators (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63281:37)
    at Parser.pp.parseStatement (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63183:10)
    at Parser.parseStatement (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:64679:22)
    at Parser.pp.parseTopLevel (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63155:21)
    at Parser.parse (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:62795:17)
    at Object.parse (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:61662:50)
    at Object.exports.default (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:7779:18)

There must be something simple that I'm overlooking. Is it maybe because of the transpiling?

Rachellrachelle

Answer 1

What do your babel options look like? You'll need the es7.decorators option or to set the stage option to 0.

config.js

System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "es7.decorators",
      "es7.classProperties",
      "runtime"
    ]
  },

Here's the skeleton-navigation project's options:

babel-options.js

module.exports = {
  modules: 'system',
  moduleIds: false,
  comments: false,
  compact: false,
  stage:2,
  optional: [
    "es7.decorators",
    "es7.classProperties"
  ]
};

Americano

Great, that was it exactly. Adding the items to babelOptions in my config.js did the trick. Thank you much! – Rachellrachelle

Answer 2

I had the same problem with Aurelia-cli application. The solution is very easy.

Just update Aurelia.json file transpolar configuration as below:

"transpiler": {
    "id": "babel",
    "displayName": "Babel",
    "fileExtension": ".js",
    "options": {
      "plugins": [
        "transform-es2015-modules-amd", "babel-plugin-transform-decorators-legacy"
      ]
    },
    "source": "src/**/*.js"
  }

We have added "babel-plugin-transform-decorators-legacy" plugin which fixes the issue.

Dizzy