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?

You have this error when loading your module? I mean when executing your code... — Thierry Templier
– Thierry Templier, Commented Mar 7, 2016 at 18:01

Thierry Templier · Accepted Answer · 2016-03-07 19:07:14Z

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

You are absolutely right. I'm afraid I still don't understand why it worked for the man in the tutorial but I am just happy to have found a solution.
There is a better way to solve it than changing the code? The link provided is not really explicative.

Ritesh Bhat · Accepted Answer · 2016-05-12 16:50:28Z

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.

Collectives™ on Stack Overflow

Ionic 2 Syntax Error While Compiling TypeScript

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related