Ionic 2 Syntax Error While Compiling TypeScript

Question

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 1

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:

• https://github.com/driftyco/ionic2-starter-tabs/tree/master/www

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