Ionic 2 - 服务意外令牌错误答案

【问题标题】：Ionic 2 - Services unexpected token errorIonic 2 - 服务意外令牌错误
【发布时间】：2016-02-28 20:32:46
【问题描述】：

我尝试在 Ionic 2 应用程序的代码中使用 Injectable，但出现此错误。

模块构建失败：SyntaxError: /home.js: Unexpected token (10:25)

export class HomePage {
constructor(myservice: WpService) {
                     ^
         this.service = myservice;
        this.data = null;
     }

这是我的代码：（home.js 文件）。

import {Page} from 'ionic-framework/ionic';
import {WpService} from './wpservice';

@Page({
  templateUrl: 'build/pages/home/home.html',
    providers: [WpService]
})
export class HomePage {
    constructor(myservice: WpService) {
        this.service = myservice;
        this.data = null;
    }

    retrieve() {
        this.service.loadData();
        setTimeout(() => {
            this.data = this.service.getData();
            console.log(this.data);
        }, 5000);
    }
}

这是 wpservice 文件：

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx'

@Injectable
export class WpService {
    constructor(http: Http) {
        this.http = http;
        this.data = null;
    }

    loadData() {
        this.http.get('<some rest api>').subscribe(data => {
            this.data = data.json() 
        });
        }

    getData() {
        return this.data;
    }
    }

奇怪的是，这个错误只发生在 2 月 26 日晚上。在此之前它工作正常。

【问题讨论】：

我不能确切地知道是什么导致了错误。但我注意到一些问题： 1- wpservice 文件末尾有一个额外的“{”。 2-你的@Injectable >> 应该是@Injectable()。 3-您的代码是 Typescript，但您的文件是 .js
@Abdulrahman：非常感谢先生；从编辑器复制/粘贴代码时 } 是一个错误，Ionic 2 使用带有 ES6 的 js 文件（与打字稿相同），所以我认为这可能不是问题所在。

标签： angular ionic2 injectable

【解决方案1】：

谢谢大家，我解决了这个问题。我将在下面发布我是如何做到的，以便其他面临同样情况的人受益。

我写了一个get parameters()方法，如下所示。（在查看了 github 上的drifty co 团队的离子会议应用程序之后）。

import {Page} from 'ionic-framework/ionic';
import {Inject} from 'angular2/core;
import {WpService} from './wpservice';

@Page({
  templateUrl: 'build/pages/home/home.html',
    providers: [WpService]
})
export class HomePage {
    static get parameters(){
       return [WpService];
      }
    constructor(wpservice) {
        this.service = wpservice;
        this.data = null;
    }

    retrieve() {
        this.service.loadData();
        setTimeout(() => {
            this.data = this.service.getData();
            console.log(this.data);
        }, 5000);
    }
}

我将服务文件更改如下：

import {Injectable, Inject} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx'

@Injectable()
export class WpService {
    static get parameters(){
      return [Http];
      }
    constructor(http) {
        this.http = http;
        this.data = null;
    }

    loadData() {
        this.http.get('<some rest api>').subscribe(data => {
            this.data = data.json() 
        });
        }

    getData() {
        return this.data;
    }
    }

如果您决定注入多个服务，则需要在 get parameters 方法中给出返回语句，如下所示：

return [[service1],[service2]];

希望这可以帮助其他面临同样问题的人。谢谢。

【讨论】：

谢谢。这与任何记录在案的示例都不同。我想这就是您使用测试版所得到的。干杯。
看起来你所做的只是删除了打字稿。这“修复”了错误，但是你没有打字稿......我在升级到节点 6 并恢复到 5 后遇到了这个错误，并且不得不重新安装东西。我仍在尝试找出如何使用打字稿来修复它
其实我从来没有用过打字稿。这是 ES6 代码。 Typescript 只是 ES6 超集的流行版本。顺便说一句，您使用的是哪个 beta 版本的 Ionic 2..？

【解决方案2】：

我也面临同样的问题，似乎是Ionic Version: 2.0.0-beta.1 的问题，显然它创建了扩展名为.js 的打字稿文件

阅读更多关于这个问题here

【讨论】：