Aurelia Defendency Injection Decorator не работает

Question

У меня проблема с получением декоратора @inject для работы при использовании Aurelia (фреймворк v 0.17, зависимость-инъекция v 0.11.2); Я получаю Неожиданную ошибку токена на декораторе. Я пробовал как Chrome 46, так и FF Dev 44.0a2, оба сообщают о той же ошибке. У меня есть экспериментальные функции javascript, включенные в Chrome. Инъекция работает очень хорошо, когда я использую параметр статического метода. У меня также есть Babel 5.8 для транспилера.

Вот мои 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; 
         }); 
    } 

} 

Вот ошибка с 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) 

Там должно быть что-то простое, что я с видом. Может быть, из-за транспиляции?

Answer 1

Как выглядят варианты вашего Babel? Вам понадобится опция es7.decorators или установить опцию stage на 0.

config.js

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

Вот варианты каркасно-навигационного проекта:

babel-options.js

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

Answer 2

У меня была такая же проблема с Aurelia-Cli применения. Решение очень просто.

Просто обновите Aurelia.json файл заполярных конфигурации, как показано ниже:

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

Мы добавили «столпотворение-плагин-преобразование-декораторы-наследие» плагин, который исправляет эту проблему.