Ionic 2 Test Environment

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="config.js"></script>
    <script src="https://npmcdn.com/ionic-angular@2.0.0-beta.5/bundles/ionic.system.js"></script>
  
    <link href="https://npmcdn.com/ionic-angular@2.0.0-beta.5/bundles/ionic.ios.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <!-- this Ionic's root component and where the app will load -->
    <ion-app></ion-app>
    
    <script>
      System.import('app.ts')
    </script>
  </body>

</html>

import { Page, NavController } from 'ionic-angular/index';
import { Page1 } from './page1.ts'


@Page({
  templateUrl:"home.html"
})
export class HomePage {
  
  greeting: string;
  
  constructor(private nav: NavController) {
		this.greeting = "Thanks for your demo and thanks for using Ionic!"
	}
	
	goToPage1() {
	  this.nav.push(Page1);
	}


}

SCROLL-CONTENT {
	overflow-y: auto !important;
}

CODE {
  background: #EFEFEF;
}

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    "emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		//"module": "commonjs",
		//"target": "es6"
  }
});

import { App, Platform } from 'ionic-angular/index';
import { TabsPage } from './tabs.ts';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  constructor(private platform: Platform) {
    this.rootPage = TabsPage;
  }
}

<ion-navbar *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
</ion-navbar>

<ion-content class="has-header">
  <div padding style="text-align: center;">
    <h1>Ionic 2 Test</h1>
    <p>
      Use this template to create a demo environment
      where the issues you're facing are reproduced. This will
      help us in easily reproducing your issue and solving it faster (:
    </p>
    <button (click)="goToPage1()">Thanks!</button>
  </div>
</ion-content>

You can use this template to show examples of your Ionic 2 issue.

import {Page, Alert} from 'ionic-angular/index';
import {NavController} from "ionic-angular/index";
import {Modal} from "ionic-angular/index";
import {ViewController} from "ionic-angular/index";


@Page({
    template: `
  <ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
  <button (click)="openModal()">open modal</button>
</ion-content>

  `,
})
export class Page1 {
    constructor(private nav:NavController) {

    }

    openModal() {
        let modal = Modal.create(MyModal);

        this.nav.present(modal);
    }
}


@Page({
    template: `
    <ion-toolbar>
        <ion-title>MyMocal</ion-title>
        <ion-buttons end>
        <button nav-pop>
            <ion-icon [name]="'close'"></ion-icon>
        </button>
    </ion-buttons>
    </ion-toolbar>
  <ion-content padding>
    <button danger (click)="closeMe()">CloseMe</button>
  </ion-content>`
})
export class MyModal {
    constructor(private nav:NavController, private viewCtrl:ViewController) {

    }

    closeMe() {
        let confirm = Alert.create({
            title: 'Close Me?',
            buttons: [
                {
                    text: 'Yes',
                    handler: () => {
                        this.viewCtrl.dismiss();
                    }
                },
                {
                    text: 'No'
                }
            ]
        });

        this.nav.present(confirm);
    }
}

import {Page} from 'ionic-angular/index';
import {HomePage} from './home.ts';
import {Page1} from './page1.ts';


@Page({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = Page1;
  tab2Root: any = HomePage;


}

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>