2

I am trying to use an Injectable in my code in an Ionic 2 app and I get this error.

Module build failed: SyntaxError: /home.js: Unexpected token (10:25)

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

This is my code: (home.js file).

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);
    }
}

and this is the wpservice file:

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;
    }
    }

Strangely this error is occurring only from feb 26 evening. Before that it was working fine.

Raja Yogan
  • 918
  • 8
  • 17
  • I can't tell exactly what's causing the error. But I noticed some issues: 1- you have an extra '{' on the end of wpservice file. 2- your @Injectable >> should be @Injectable(). 3- Your code is Typescript but your files are .js – Abdulrahman Alsoghayer Feb 27 '16 at 11:29
  • @Abdulrahman : Thank you so much sir; the } was a mistake while copy/pasting my code from my editor and Ionic 2 uses js files with ES6 (same as typescript), so I don't think that might be the issue here. – Raja Yogan Feb 27 '16 at 11:38

2 Answers2

3

Thanks guys, I resolved this issue. I'll post how I did it below so that anyone else facing the same would get benefited.

I wrote a get parameters() method as shown below. (After having a look at the ionic conferencing app from the drifty co team on github).

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);
    }
}

And I changed the service file as below:

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;
    }
    }

Incase you decide to inject more than one service then you need to give the return statement in the get parameters method like below:

return [[service1],[service2]];

Hope this helps someone else facing the same issue. Thanks.

Raja Yogan
  • 918
  • 8
  • 17
  • 1
    Thank you. This is way different from any documented examples. I guess that's what you get for using beta versions. Cheers. – markau Mar 25 '16 at 06:49
  • Looks like all you have done is removed typescript. This 'fixes' the error, but then you don't have typescript... I just got this error after upgrading to node 6 and reverting to 5, and having to re-install stuff. I still am trying to find out how to fix it with typescript working – webdevinci May 11 '16 at 16:17
  • Actually, I never used typescript. This is ES6 code. Typescript is simply a popular version of a superset of ES6. Btw., which beta version of Ionic 2 are you using.. ? – Raja Yogan May 12 '16 at 17:23
0

I'm facing the same issue, it seems like its an issue with Ionic Version: 2.0.0-beta.1, apparently its creating typescript files with the extension of .js

read more about this issue here

sameera207
  • 16,547
  • 19
  • 87
  • 152