Aurelia Dependency Injection Dekorator funktioniert nicht

Question

Ich habe ein Problem mit der @inject Dekorateur zu arbeiten, wenn Aurelia (Framework v 0.17, Abhängigkeit-Injektion v 0.11.2); Ich erhalte einen unerwarteten Token-Fehler auf dem Decorator. Ich habe sowohl Chrome 46 als auch FF Dev 44.0a2 ausprobiert, beide melden den gleichen Fehler. Ich habe experimentelle Javascript-Funktionen in Chrome aktiviert. Die Injektion funktioniert problemlos, wenn ich die Option für die statische Methode verwende. Ich habe auch Babel 5.8 für den Transpiler.

Hier ist meine 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; 
         }); 
    } 

} 

Hier ist der Fehler von 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) 

Es muss etwas einfach sein, dass ich mit Blick auf. Liegt es vielleicht am Transpilieren?

Answer 1

Wie sehen Ihre Babel-Optionen aus? Sie benötigen die Option es7.decorators oder die Option stage auf 0.

config.js

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

Hier die Optionen Skelett-Navigation Projekts:

babel-options.js

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

Answer 2

ich das gleiche Problem mit Aurelia-cli Anwendung hatte. Die Lösung ist sehr einfach.

einfach aktualisieren Aurelia.json transpolaren Konfigurationsdatei wie folgt:

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

Wir haben hinzugefügt "babel-Plugin-Transformations-Dekorateure-Erbe" Plugin, das das Problem behebt.