Cannot use inheritance properly Ionic 2

Question

I am working on an app with different pages and I wanted to have an abstract class for the page from which all the pages inherit from. The problem is if I "extend" one class with the abstract one, it works, but as soon as I two or more pages extend the abstract class it gives me this error:

Cannot read property 'prototype' of undefined

My AbstractPage is this one:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Contact } from '../contact/contact';
import { Page1 } from '../page1/page1';
import { Page2 } from '../page2/page2';
import { Page3 } from '../page3/page3';
import { Page4 } from '../page4/page4';
import { Page5 } from '../page5/page5';
import { Page6 } from '../page6/page6';
import { Page7 } from '../page7/page7';
import { Page8 } from '../page8/page8';
import { Page9 } from '../page9/page9';
import { Page10 } from '../page10/page10';
import { Page11 } from '../page11/page11';
import { Page12 } from '../page12/page12';
import { Page13 } from '../page13/page13';
import { Page14 } from '../page14/page14';
import { Page15 } from '../page15/page15';
import { Page16 } from '../page16/page16';

export abstract class AbstractPage {
  static pages = [Page1, Page2, Page3, Page4, Page5, Page6, Page7, Page8, Page9, Page10, Page11, Page12, Page13, Page14, Page15, Page16];
  pageNumber: number;
  hasSharableContent: boolean;
  public navCtrl: NavController;

  constructor( page_number: number, has_sharable_content: boolean) {
    this.pageNumber = page_number;
    this.hasSharableContent = has_sharable_content;
  }

  changePage(direction: number) {
    if (direction==1){
      console.log(direction,this.pageNumber);
      this.navCtrl.setRoot(AbstractPage.pages[this.pageNumber], {}, {animate: true, direction: 'forward'});
    }
    else if(direction == 2){
      this.navCtrl.push(Contact);
    }
    else{
      this.navCtrl.setRoot(AbstractPage.pages[this.pageNumber-1], {}, {animate: true, direction: 'back'});
    }
  }
}

My Page1 is:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {AbstractPage } from '../abstract-page/abstract-page';

@Component({
  selector: 'page1',
  templateUrl: 'page1.html'
})

export class Page1 extends AbstractPage{
  constructor(public navCtrl: NavController) {
    super(1, false);
  }
}

My Page2 is:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AbstractPage } from '../abstract-page/abstract-page';

@Component({
  selector: 'page2',
  templateUrl: 'page2.html'
})


export class Page2 extends AbstractPage{
  constructor(public navCtrl: NavController) {
    super(2, true);
  }
}

I've added a repo on GitHub if someone wants to try and solve the problem: https://github.com/francescobenintende/Tests/tree/master/abstraction

Error: https://i.sstatic.net/nLaG4.jpg

Answer 1

Update:

You can't use this kind of Page component inheritance with Ionic2 and Typescript now.Hope you can do that with Ionic3 and latest Typescript which will be included with Ionic3.This issue is related to the Typescript and web pack.

You can get more info here.

You too can see the issue here if you explore the main.js.map file.It creates a subclass(Page1) first and after that base class (AbstractPage).That is the reason for this error.But unfortunately, we cannot change the order.

Old Answer:

You can try with public constructor() on the abstract class as shown below.

 export abstract class AbstractPage {


  constructor(public page_number: number,public has_sharable_content: boolean) {

    }

  changePage(direction: number) {
    if (direction==1){
      console.log(direction,this.page_number);
      this.navCtrl.setRoot(AbstractPage.pages[this.page_number], {}, {animate: true, direction: 'forward'});
    }
    else if(direction == 2){
      this.navCtrl.push(Contact);
    }
    else{
      this.navCtrl.setRoot(AbstractPage.pages[this.page_number-1], {}, {animate: true, direction: 'back'});
    }
  }
}