Geek Answers Handbook

Broken Aurelia injection decorator

I had a problem with the @inject decorator working when using Aurelia (framework v 0.17, dependency-injection v 0.11.2); I get an unexpected token error on the decorator. I tried both Chrome 46 and FF Dev 44.0a2, both report the same error. I have experimental javascript features included in Chrome. Injection works very well when I use the static method parameter. 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/ babel-core@5.8.33 /browser.js:62826:13) at Parser.pp.unexpected (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:64056:8) at Parser.pp.parseDecorator (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:63295:10) at Parser.pp.parseDecorators (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:63281:37) at Parser.pp.parseStatement (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:63183:10) at Parser.parseStatement (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:64679:22) at Parser.pp.parseTopLevel (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:63155:21) at Parser.parse (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:62795:17) at Object.parse (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:61662:50) at Object.exports.default (http://localhost:8088/jspm_packages/npm/ babel-core@5.8.33 /browser.js:7779:18)

There must be something simple that I'm missing. Maybe due to transpilation?

+6
source share
2 answers

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

config.js

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

Here are the skeletal navigation design options:

babel-options.js

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

I had the same problem with the Aurelia-cli app. The solution is very simple.

Just update the configuration of the Aurelia.json archive as shown below:

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

We added the babel-plugin-transform-decorators-legacy plugin that fixes the problem.

0
source

More articles:


All Articles