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

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

Solution 2:

When you are writing in .js file you will have to give the static block i.e.

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

to get the type of nav, that is inside the contructor parameter.

but in .ts file, you need not define the static block, you can simply define it inside the constructor like :

constructor (nav : NavController) {}

you can think of it as nav is a variable and NavController is the type.

That is the reason why you were getting the error. You were using typescript(.ts) syntax in javascript(.js) file.

So next time while you are watching a tutorial try to see if the tutor is working with .js file or .ts file :-)

Hope it helps.