Aurelia依赖注入修饰器不工作

我在使用Aurelia时得到@inject修饰器工作时出现问题（framework v 0.17，dependency-injection v 0.11.2）;我在装饰器上收到意外令牌错误。我已经尝试了Chrome 46和FF Dev 44.0a2，都报告了相同的错误。我在Chrome中启用了实验性JavaScript功能。当我使用静态方法选项时，注射工作得很好。我也有Babel 5.8作为transpiler。Aurelia依赖注入修饰器不工作

这里是我的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/[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)

必须有一些简单的我俯瞰。这是否可能是因为运输？

来源

2015-11-07 squillman

你的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" 
    ] 
};

来源

2015-11-07 21:37:08

太好了，就是这样。在我的config.js中将这些项目添加到babelOptions中的确有窍门。非常感谢！ – squillman

我有奥里利亚-CLI应用了同样的问题。解决方案非常简单。

只需更新Aurelia.json文件transpolar配置如下：

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

我们增加了“巴别塔 - 插件 - 转换 - 装饰遗”插件，修复该问题。

来源

2017-12-21 03:25:58

Aurelia依赖注入修饰器不工作

回答

相关问题