Jeffrey Lemay Jeffrey Lemay - 6 months ago 57
Javascript Question

Ionic 2 Syntax Error While Compiling TypeScript

While following the tutorial here I get to the point where I am getting a syntax error while compiling my typescript code.

Here is the error:


/app/pages/list/list.js Module build failed: SyntaxError:
/focus/projects/ionic-todo/app/pages/list/list.js: Unexpected token
(10:17) 8 | 9 | export class ListPage {


10 | constructor(nav: NavController){
| ^ 11 | this.nav = nav; 12 | 13 | this.items = [



As you can see, it seems to think there is something wrong with the colon. However if you remove the colon then you get a similar error where the space is instead.

Here is the full code:



import {Page, NavController} from 'ionic-angular';
import {AddItemPage} from '../add-item/add-item';


@Page({
templateUrl: 'build/pages/list/list.html'
})

export class ListPage {
constructor(nav: NavController){
this.nav = nav;

this.items = [
{'title': 'hi', 'description': 'hello'},
{'title': 'sadf', 'description': 'asdfasdf'},
{'title': 'asd', 'description': 'asdf'}
];
}

addItem()
{
this.nav.push(AddItemPage, {ListPage: this});
}
}





Any ideas what could be causing this to happen?

Answer

Your error let me think that you try to execute directly your TypeScript code without having compiled (preprocessing) or transpiled it on the fly.

I think that your code should be ES6 only. In fact, with ES6, you have the class support but not type support (in constructor / method for example).

I had a look at Ionic2 generator templates and they seem to be ES6. See this link:

You could adapt your code like this:

import {Page, NavController} from 'ionic-angular';
import {AddItemPage} from '../add-item/add-item';


@Page({
  templateUrl: 'build/pages/list/list.html'
})

export class ListPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav){
    this.nav = nav;

    this.items = [
      {'title': 'hi', 'description': 'hello'},
      {'title': 'sadf', 'description': 'asdfasdf'},
      {'title': 'asd', 'description': 'asdf'}
    ];
  }

  addItem()
  {
    this.nav.push(AddItemPage, {ListPage: this});
  }
}