test(e2e): refactor e2e tests to modular structure and utilize lazy loading where possible

refactor e2e tests to modular structure and utilize lazy loading where possible

src/components/action-sheet/test/basic/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

src/components/action-sheet/test/basic/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { ModalPageModule } from '../pages/modal-page/modal-page.module';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    ModalPageModule,
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/action-sheet/test/basic/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/action-sheet/test/basic/e2e.ts

@@ -1,3 +1,4 @@
+import { by, element } from 'protractor';
 
 it('should open action sheet', function() {
   element(by.css('.e2eOpenActionSheet')).click();

src/components/action-sheet/test/basic/pages/modal-page/modal-page.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { ModalPage } from './modal-page';
+
+@NgModule({
+  declarations: [
+    ModalPage,
+  ],
+  imports: [
+    DeepLinkModule.forChild(ModalPage),
+  ],
+  entryComponents: [
+    ModalPage,
+  ]
+})
+export class ModalPageModule {}

src/components/action-sheet/test/basic/pages/modal-page/modal-page.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ViewController } from '../../../../../..';
+
+@Component({
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons start>
+          <button ion-button (click)="dismiss()" strong>Close</button>
+        </ion-buttons>
+        <ion-title>Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      Hi, I'm Bob, and I'm a modal.
+    </ion-content>
+  `
+})
+export class ModalPage {
+
+  constructor(public viewCtrl: ViewController) {}
+
+  dismiss() {
+    this.viewCtrl.dismiss();
+  }
+}

src/components/action-sheet/test/basic/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/action-sheet/test/basic/pages/page-one/page-one.ts

@@ -1,10 +1,12 @@
-import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, ActionSheetController, AlertController, ModalController, ViewController, Platform } from '../../../../../ionic-angular';
+import { Component } from '@angular/core';
+import { ActionSheetController, AlertController, ModalController, Platform } from '../../../../../..';
+
+import { ModalPage } from '../modal-page/modal-page';
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page-one.html'
 })
-export class E2EPage {
+export class PageOne {
   result: string = '';
 
   constructor(public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public modalCtrl: ModalController, public plt: Platform) {}
@@ -152,53 +154,3 @@ export class E2EPage {
   }
 
 }
-
-@Component({
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons start>
-          <button ion-button (click)="dismiss()" strong>Close</button>
-        </ion-buttons>
-        <ion-title>Modal</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content padding>
-      Hi, I'm Bob, and I'm a modal.
-    </ion-content>
-  `
-})
-export class ModalPage {
-
-  constructor(public viewCtrl: ViewController) {}
-
-  dismiss() {
-    this.viewCtrl.dismiss();
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-export class E2EApp {
-  root = E2EPage;
-}
-
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage,
-    ModalPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage,
-    ModalPage
-  ]
-})
-export class AppModule {}

src/components/alert/test/basic/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = PageOne;
+}

src/components/alert/test/basic/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { E2EApp } from './app.component';
+import { ModalPageModule } from '../pages/modal-page/modal-page.module';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(E2EApp),
+    ModalPageModule,
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/alert/test/basic/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/alert/test/basic/e2e.ts

@@ -1,3 +1,4 @@
+import { by, element } from 'protractor';
 
 it('should open basic alert', function() {
   element(by.css('.e2eOpenAlert')).click();

src/components/alert/test/basic/pages/modal-page/modal-page.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { ModalPage } from './modal-page';
+
+@NgModule({
+  declarations: [
+    ModalPage,
+  ],
+  imports: [
+    DeepLinkModule.forChild(ModalPage),
+  ],
+  entryComponents: [
+    ModalPage,
+  ]
+})
+export class ModalPageModule {}

src/components/alert/test/basic/pages/modal-page/modal-page.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ViewController } from '../../../../../..';
+
+@Component({
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons>
+          <button ion-button (click)="dismiss()" strong>Close</button>
+        </ion-buttons>
+        <ion-title>Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      Hi, I'm Bob, and I'm a modal.
+      <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
+    </ion-content>
+  `
+})
+export class ModalPage {
+  constructor(private viewCtrl: ViewController) {}
+
+  dismiss() {
+    this.viewCtrl.dismiss();
+  }
+}

src/components/alert/test/basic/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/alert/test/basic/pages/page-one/page-one.ts

@@ -1,11 +1,12 @@
-import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, AlertController, ModalController, ViewController } from '../../../../../ionic-angular';
+import { Component } from '@angular/core';
+import { AlertController, ModalController } from '../../../../../..';
 
+import { ModalPage } from '../modal-page/modal-page';
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page-one.html'
 })
-export class E2EPage {
+export class PageOne {
   testConfirmOpen: boolean = false;
   testPromptOpen: boolean = false;
   testConfirmResult: string = '';
@@ -301,52 +302,3 @@ export class E2EPage {
     console.log('E2EPage, ionViewDidEnter');
   }
 }
-
-@Component({
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons>
-          <button ion-button (click)="dismiss()" strong>Close</button>
-        </ion-buttons>
-        <ion-title>Modal</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content padding>
-      Hi, I'm Bob, and I'm a modal.
-      <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
-    </ion-content>
-  `
-})
-export class ModalPage {
-  constructor(private viewCtrl: ViewController) {}
-
-  dismiss() {
-    this.viewCtrl.dismiss();
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-export class E2EApp {
-  root = E2EPage;
-}
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage,
-    ModalPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage,
-    ModalPage
-  ]
-})
-export class AppModule {}

src/components/alert/test/dismiss/app.module.ts

@@ -1,5 +1,6 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, AlertController, LoadingController, NavController } from '../../../../../ionic-angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule, AlertController, LoadingController, NavController } from '../../../..';
 import { FormBuilder, Validators } from '@angular/forms';
 
 
@@ -180,6 +181,7 @@ export class E2EApp {
     AnotherPage
   ],
   imports: [
+    BrowserModule,
     IonicModule.forRoot(E2EApp)
   ],
   bootstrap: [IonicApp],

src/components/alert/test/dismiss/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/app/test/animations/app.module.ts

@@ -1,5 +1,6 @@
 import { Component, NgModule } from '@angular/core';
-import { Animation, Config, IonicApp, IonicModule, Platform } from '../../../../../ionic-angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { Animation, Config, IonicApp, IonicModule, Platform } from '../../../..';
 
 
 @Component({
@@ -67,6 +68,7 @@ export class E2EApp {
     E2EPage
   ],
   imports: [
+    BrowserModule,
     IonicModule.forRoot(E2EApp)
   ],
   bootstrap: [IonicApp],

src/components/app/test/animations/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/app/test/app.spec.ts

@@ -1,9 +1,9 @@
 import { App } from '../app';
-import { AppPortal } from '../app-root';
 import { ClickBlock } from '../../../util/click-block';
 import { Config } from '../../../config/config';
 import { mockApp, mockConfig, mockElementRef, mockNavController, mockPlatform, MockPlatform, mockRenderer, mockTab, mockTabs, mockView, mockViews } from '../../../util/mock-providers';
 import { OverlayPortal } from '../../nav/overlay-portal';
+import { PORTAL_MODAL } from '../app-constants';
 
 
 describe('App', () => {
@@ -146,13 +146,13 @@ describe('App', () => {
       expect(plt.exitApp).not.toHaveBeenCalled();
     });
 
-    it('should pop the overlay in the portal of the root nav', () => {
+    it('should pop the overlay in the portal of the root nav', (done: Function) => {
       let nav = mockNavController();
       app._setRootNav(nav);
 
       spyOn(plt, 'exitApp');
       spyOn(nav, 'pop');
-      spyOn(portal, 'pop');
+      spyOn(portal, 'pop').and.returnValue(Promise.resolve());
 
       let view1 = mockView();
       let view2 = mockView();
@@ -161,11 +161,14 @@ describe('App', () => {
       let overlay1 = mockView();
       mockViews(portal, [overlay1]);
 
-      app.goBack();
-
+      app.goBack().then(() => {
         expect(portal.pop).toHaveBeenCalled();
         expect(nav.pop).not.toHaveBeenCalled();
         expect(plt.exitApp).not.toHaveBeenCalled();
+        done();
+      }).catch((err: Error) => {
+        done(err);
+      });
     });
 
     it('should pop the second view in the root nav', () => {
@@ -471,7 +474,7 @@ describe('App', () => {
     config = mockConfig();
     plt = mockPlatform();
     app = mockApp(config, plt);
-    portal = app._appRoot._getPortal(AppPortal.MODAL);
+    portal = app._appRoot._getPortal(PORTAL_MODAL);
   });
 
 });

src/components/app/test/cordova/app.module.ts

@@ -1,173 +0,0 @@
-import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, NavController, ModalController, ViewController } from '../../../../../ionic-angular';
-import { Injectable } from '@angular/core';
-
-
-@Injectable()
-export class SomeData {
-  constructor() {}
-
-  getData() {
-    return 'SomeData';
-  }
-}
-
-@Injectable()
-export class OtherData {
-  constructor() {}
-
-  getData() {
-    return 'OtherData';
-  }
-}
-
-@Component({
-  template: `
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>This is a modal</ion-title>
-      <ion-buttons left>
-        <button ion-button icon-only (click)="dismissModal()" class="e2eCordovaCloseModal">
-          <ion-icon name="close"></ion-icon>
-        </button>
-      </ion-buttons>
-      <ion-buttons end>
-        <button ion-button icon-only>
-          <ion-icon name="funnel"></ion-icon>
-        </button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content padding>
-    <p>The modal toolbar should have status bar padding.</p>
-    <button ion-button block (click)="dismissModal()">Close modal</button>
-  </ion-content>
-  `
-})
-export class MyModal {
-  constructor(public viewCtrl: ViewController) {}
-
-  dismissModal() {
-    this.viewCtrl.dismiss();
-  }
-}
-
-
-@Component({
-  templateUrl: 'page1.html'
-})
-export class Page1 {
-  page2 = Page2;
-  sort: string = 'all';
-
-  constructor(public navCtrl: NavController, public someData: SomeData, public otherData: OtherData) {
-    console.log('Got some data from', someData.getData());
-    console.log('Got some data from', otherData.getData());
-  }
-
-  goToTabs() {
-    this.navCtrl.push(TabsPage);
-  }
-}
-
-
-@Component({
-  templateUrl: 'page2.html'
-})
-export class Page2 {
-  page1 = Page1;
-  page3 = Page3;
-
-  constructor(public modalCtrl: ModalController) {}
-
-  openModal() {
-    this.modalCtrl.create(MyModal).present();
-  }
-}
-
-
-@Component({
-  templateUrl: 'page3.html'
-})
-export class Page3 {
-  constructor(public navCtrl: NavController) {}
-
-  goBack() {
-    this.navCtrl.pop();
-  }
-}
-
-
-@Component({
-  template: `
-  <ion-header>
-    <ion-navbar>
-      <ion-title>This is a tab page</ion-title>
-      <button ion-button menuToggle>
-        <ion-icon name="menu"></ion-icon>
-      </button>
-      <ion-buttons end>
-        <button ion-button>
-          <ion-icon name="funnel"></ion-icon>
-        </button>
-      </ion-buttons>
-    </ion-navbar>
-  </ion-header>
-  <ion-content padding>
-    <p>The toolbar should have status bar padding.</p>
-  </ion-content>
-  `
-})
-export class TabPage1 {}
-
-@Component({
-  templateUrl: 'tabs.html'
-})
-export class TabsPage {
-  tab1Root = TabPage1;
-  tab2Root = Page2;
-  tab3Root = Page3;
-
-  constructor(public navCtrl: NavController) {}
-
-  goBack() {
-    this.navCtrl.pop();
-  }
-}
-
-
-@Component({
-  templateUrl: `./app.html`
-})
-export class E2EApp {
-  root = Page1;
-}
-
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    TabsPage,
-    TabPage1,
-    Page1,
-    Page2,
-    Page3,
-    MyModal
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp, {
-      statusbarPadding: true
-    })
-  ],
-  providers: [SomeData, OtherData],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    TabsPage,
-    TabPage1,
-    Page1,
-    Page2,
-    Page3,
-    MyModal
-  ]
-})
-export class AppModule {}

src/components/app/test/cordova/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  templateUrl: `./app.component.html`
+})
+export class E2EApp {
+  root = PageOne;
+}

src/components/app/test/cordova/app/app.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { E2EApp } from './app.component';
+import { PageOne } from '../pages/page-one/page-one';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    E2EApp,
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(E2EApp, { statusbarPadding: true }, {
+      links: [
+        { name: 'page-one', component: PageOne },
+        { name: 'page-two', loadChildren: '../pages/page-two/page-two.module#PageTwoModule'},
+        { name: 'page-three', loadChildren: '../pages/page-three/page-three.module#PageThreeModule'},
+        { name: 'tabs-page', loadChildren: '../pages/tabs/tabs-page.module#TabsPageModule'},
+        { name: 'tabs-page-one', loadChildren: '../pages/tabs-page-one/tabs-page-one.module#TabsPageOneModule'},
+      ]
+    }),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp],
+})
+export class AppModule {}

src/components/app/test/cordova/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/app/test/cordova/e2e.ts

@@ -1,3 +1,4 @@
+import { by, element } from 'protractor';
 
 it('should navigate to page 2', function() {
   element(by.css('.e2eCordovaPage2')).click();

src/components/app/test/cordova/pages/modal/modal-page.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { ViewController } from '../../../../../..';
+
+@Component({
+  template: `
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>This is a modal</ion-title>
+      <ion-buttons left>
+        <button ion-button icon-only (click)="dismissModal()" class="e2eCordovaCloseModal">
+          <ion-icon name="close"></ion-icon>
+        </button>
+      </ion-buttons>
+      <ion-buttons end>
+        <button ion-button icon-only>
+          <ion-icon name="funnel"></ion-icon>
+        </button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content padding>
+    <p>The modal toolbar should have status bar padding.</p>
+    <button ion-button block (click)="dismissModal()">Close modal</button>
+  </ion-content>
+  `
+})
+export class ModalPage {
+  constructor(public viewCtrl: ViewController) {}
+
+  dismissModal() {
+    this.viewCtrl.dismiss();
+  }
+}

src/components/app/test/cordova/pages/modal/modal.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { ModalPage } from './modal-page';
+
+@NgModule({
+  declarations: [
+    ModalPage
+  ],
+  imports: [
+    DeepLinkModule.forChild(ModalPage)
+  ],
+  entryComponents: [
+    ModalPage
+  ]
+})
+export class ModalPageModule {}

src/components/app/test/cordova/pages/page-one/page-one.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+import { SomeData } from './provider-one';
+import { OtherData } from './provider-two';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  providers: [
+    SomeData,
+    OtherData
+  ]
+})
+export class PageOneModule {}

src/components/app/test/cordova/pages/page-one/page-one.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { NavController } from '../../../../../..';
+
+import { SomeData } from './provider-one';
+import { OtherData } from './provider-two';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  page2 = 'page-two';
+  sort: string = 'all';
+
+  constructor(public navCtrl: NavController, public someData: SomeData, public otherData: OtherData) {
+    console.log('Got some data from', someData.getData());
+    console.log('Got some data from', otherData.getData());
+  }
+
+  goToTabs() {
+    this.navCtrl.push('tabs-page');
+  }
+}

src/components/app/test/cordova/pages/page-one/provider-one.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SomeData {
+  constructor() {}
+
+  getData() {
+    return 'SomeData';
+  }
+}

src/components/app/test/cordova/pages/page-one/provider-two.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class OtherData {
+  constructor() {}
+
+  getData() {
+    return 'OtherData';
+  }
+}

src/components/app/test/cordova/pages/page-three/page-three.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageThree } from './page-three';
+
+@NgModule({
+  declarations: [
+    PageThree,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageThree)
+  ],
+  entryComponents: [
+    PageThree,
+  ]
+})
+export class PageThreeModule {}

src/components/app/test/cordova/pages/page-three/page-three.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { NavController } from '../../../../../..';
+
+@Component({
+  templateUrl: 'page-three.html'
+})
+export class PageThree {
+  constructor(public navCtrl: NavController) {}
+
+  goBack() {
+    this.navCtrl.pop();
+  }
+}

src/components/app/test/cordova/pages/page-two/page-two.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageTwo } from './page-two';
+import { ModalPageModule } from '../modal/modal.module';
+
+@NgModule({
+  declarations: [
+    PageTwo,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageTwo),
+    ModalPageModule
+  ],
+  entryComponents: [
+    PageTwo,
+  ]
+})
+export class PageTwoModule {}

src/components/app/test/cordova/pages/page-two/page-two.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ModalController } from '../../../../../..';
+
+import { ModalPage } from '../modal/modal-page';
+
+@Component({
+  templateUrl: 'page-two.html'
+})
+export class PageTwo {
+  page1 = 'page-one';
+  page3 = 'page-three';
+
+  constructor(public modalCtrl: ModalController) {}
+
+  openModal() {
+    const modal = this.modalCtrl.create(ModalPage);
+    modal.present();
+  }
+}

src/components/app/test/cordova/pages/tabs-page-one/tabs-page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { TabsPageOne } from './tabs-page-one';
+
+@NgModule({
+  declarations: [
+    TabsPageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(TabsPageOne)
+  ],
+  entryComponents: [
+    TabsPageOne,
+  ]
+})
+export class TabsPageOneModule {}

src/components/app/test/cordova/pages/tabs-page-one/tabs-page-one.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+  <ion-header>
+    <ion-navbar>
+      <ion-title>This is a tab page</ion-title>
+      <button ion-button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+      </button>
+      <ion-buttons end>
+        <button ion-button>
+          <ion-icon name="funnel"></ion-icon>
+        </button>
+      </ion-buttons>
+    </ion-navbar>
+  </ion-header>
+  <ion-content padding>
+    <p>The toolbar should have status bar padding.</p>
+  </ion-content>
+  `
+})
+export class TabsPageOne {
+}

src/components/app/test/cordova/pages/tabs/tabs-page.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { TabsPage } from './tabs-page';
+
+@NgModule({
+  declarations: [
+    TabsPage,
+  ],
+  imports: [
+    DeepLinkModule.forChild(TabsPage)
+  ],
+  entryComponents: [
+    TabsPage,
+  ]
+})
+export class TabsPageModule {}

src/components/app/test/cordova/pages/tabs/tabs-page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavController } from '../../../../../..';
+
+@Component({
+  templateUrl: 'tabs-page.html'
+})
+export class TabsPage {
+  tab1Root = 'tabs-page-one';
+  tab2Root = 'page-two';
+  tab3Root = 'page-three';
+
+  constructor(public navCtrl: NavController) {}
+
+  goBack() {
+    this.navCtrl.pop();
+  }
+}

src/components/app/test/gesture-collision/app.module.ts

@@ -1,86 +0,0 @@
-import { Component, ViewChild, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, MenuController, NavController, AlertController, Nav, Refresher } from '../../../../../ionic-angular';
-
-
-@Component({
-  templateUrl: 'page1.html'
-})
-export class Page1 {
-  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}
-
-  presentAlert() {
-    let alert = this.alertCtrl.create({
-      title: 'New Friend!',
-      message: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
-      cssClass: 'my-alert',
-      buttons: ['Ok']
-    });
-    alert.present();
-  }
-
-  goToPage1() {
-    this.navCtrl.push(Page1);
-  }
-
-  doRefresh(refresher: Refresher) {
-    setTimeout(() => {
-      refresher.complete();
-    }, 1000);
-  }
-}
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class E2EPage {
-  rootPage: any;
-  changeDetectionCount: number = 0;
-  pages: Array<{title: string, component: any}>;
-  @ViewChild(Nav) nav: Nav;
-
-  constructor(private menu: MenuController) {
-    this.rootPage = Page1;
-
-    this.pages = [
-      { title: 'Page 1', component: Page1 },
-      { title: 'Page 2', component: Page1 },
-      { title: 'Page 3', component: Page1 },
-    ];
-  }
-
-  openPage(page: any) {
-    // Reset the content nav to have just this page
-    // we wouldn't want the back button to show in this scenario
-    this.nav.setRoot(page.component).then(() => {
-      // wait for the root page to be completely loaded
-      // then close the menu
-      this.menu.close();
-    });
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class E2EApp {
-  rootPage = E2EPage;
-}
-
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage,
-    Page1
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage,
-    Page1
-  ]
-})
-export class AppModule {}

src/components/app/test/gesture-collision/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/app/test/gesture-collision/app/app.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent, {}, {
+      links: [
+        { name: 'page-one', loadChildren: '../pages/page-one/page-one.module#PageOneModule'},
+        { name: 'page-two', loadChildren: '../pages/page-two/page-two.module#PageTwoModule'},
+      ]
+    }),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+  ]
+})
+export class AppModule {}

src/components/app/test/gesture-collision/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/app/test/gesture-collision/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/app/test/gesture-collision/pages/page-one/page-one.ts

@@ -0,0 +1,33 @@
+import { Component, ViewChild } from '@angular/core';
+import { MenuController, Nav } from '../../../../../..';
+
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  rootPage: any;
+  changeDetectionCount: number = 0;
+  pages: Array<{title: string, component: any}>;
+  @ViewChild(Nav) nav: Nav;
+
+  constructor(private menu: MenuController) {
+    this.rootPage = 'page-two';
+
+    this.pages = [
+      { title: 'Page 1', component: 'page-two' },
+      { title: 'Page 2', component: 'page-two' },
+      { title: 'Page 3', component: 'page-two' },
+    ];
+  }
+
+  openPage(page: any) {
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    this.nav.setRoot(page.component).then(() => {
+      // wait for the root page to be completely loaded
+      // then close the menu
+      this.menu.close();
+    });
+  }
+}

src/components/app/test/gesture-collision/pages/page-two/page-two.html

@@ -84,7 +84,7 @@
       <ion-toggle></ion-toggle>
     </ion-item>
 
-    <button ion-item (click)="goToPage1()">Push same page</button>
+    <button ion-item (click)="goToPageTwo()">Push same page</button>
 
     <ion-item>
       <ion-label>RANGE</ion-label>

src/components/app/test/gesture-collision/pages/page-two/page-two.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageTwo } from './page-two';
+
+@NgModule({
+  declarations: [
+    PageTwo,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageTwo),
+  ],
+  entryComponents: [
+    PageTwo,
+  ]
+})
+export class PageTwoModule {}

src/components/app/test/gesture-collision/pages/page-two/page-two.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { AlertController, NavController, Refresher } from '../../../../../..';
+
+@Component({
+  templateUrl: 'page-two.html'
+})
+export class PageTwo {
+  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}
+
+  presentAlert() {
+    let alert = this.alertCtrl.create({
+      title: 'New Friend!',
+      message: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
+      cssClass: 'my-alert',
+      buttons: ['Ok']
+    });
+    alert.present();
+  }
+
+  goToPageTwo() {
+    this.navCtrl.push('page-two');
+  }
+
+  doRefresh(refresher: Refresher) {
+    setTimeout(() => {
+      refresher.complete();
+    }, 1000);
+  }
+}

src/components/app/test/gestures/app.module.ts

@@ -1,5 +1,6 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../../../../../ionic-angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
@@ -27,6 +28,7 @@ export class E2EApp {
     E2EPage
   ],
   imports: [
+    BrowserModule,
     IonicModule.forRoot(E2EApp)
   ],
   bootstrap: [IonicApp],

src/components/app/test/gestures/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/app/test/typography/app.module.ts

@@ -1,5 +1,6 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, App } from '../../../../../ionic-angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule, App } from '../../../..';
 
 
 @Component({
@@ -16,6 +17,7 @@ export class E2EApp {
     E2EApp
   ],
   imports: [
+    BrowserModule,
     IonicModule.forRoot(E2EApp)
   ],
   bootstrap: [IonicApp]

src/components/app/test/typography/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/badge/test/basic/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/badge/test/basic/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/badge/test/basic/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/badge/test/basic/e2e.ts

@@ -1,3 +1,4 @@
+import { by, element } from 'protractor';
 
 it('should toggle color', function() {
   element(by.css('.e2eBadgeToggleColor')).click();

src/components/badge/test/basic/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/badge/test/basic/pages/page-one/page-one.ts

@@ -1,11 +1,10 @@
-import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, Config } from '../../../../../ionic-angular';
-
+import { Component } from '@angular/core';
+import { Config } from '../../../../../..';
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page-one.html'
 })
-export class E2EPage {
+export class PageOne {
   dynamicColor = 'primary';
   dynamicMode: string;
 
@@ -38,25 +37,3 @@ export class E2EPage {
     this.toggleMode();
   }
 }
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class E2EApp {
-  rootPage = E2EPage;
-}
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage
-  ]
-})
-export class AppModule {}

src/components/button/test/anchors/app.module.ts

@@ -1,46 +0,0 @@
-import { NgModule, Component } from '@angular/core';
-import { IonicApp, IonicModule, App } from '../../../../../ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class E2EPage {
-  btnColor: string;
-  testingColors = ['primary', 'secondary', 'danger', 'dark'];
-  testingColorIndex = 0;
-
-  constructor(app: App) {
-    app.setTitle('Basic Buttons');
-    this.chgColor();
-  }
-
-  chgColor() {
-    this.btnColor = this.testingColors[this.testingColorIndex];
-    console.log('dynamic btnColor', this.btnColor);
-    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class E2EApp {
-  rootPage = E2EPage;
-}
-
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage
-  ]
-})
-export class AppModule {}

src/components/button/test/anchors/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/button/test/anchors/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/button/test/anchors/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/button/test/anchors/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/button/test/anchors/pages/page-one/page-one.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { App } from '../../../../../..';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  btnColor: string;
+  testingColors = ['primary', 'secondary', 'danger', 'dark'];
+  testingColorIndex = 0;
+
+  constructor(app: App) {
+    app.setTitle('Basic Buttons');
+    this.chgColor();
+  }
+
+  chgColor() {
+    this.btnColor = this.testingColors[this.testingColorIndex];
+    console.log('dynamic btnColor', this.btnColor);
+    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
+  }
+}

src/components/button/test/attributes/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/button/test/attributes/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/button/test/attributes/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/button/test/attributes/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/button/test/attributes/pages/page-one/page-one.ts

@@ -1,11 +1,9 @@
-import { NgModule, Component } from '@angular/core';
-import { IonicApp, IonicModule } from '../../../../../ionic-angular';
-
+import { Component } from '@angular/core';
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page-one.html'
 })
-export class E2EPage {
+export class PageOne {
   isFull: boolean = true;
   isBlock: boolean = true;
   isBarClear: boolean = true;
@@ -49,25 +47,3 @@ export class E2EPage {
     this.isDark = null;
   }
 }
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class E2EApp {
-  rootPage = E2EPage;
-}
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage
-  ]
-})
-export class AppModule {}

src/components/button/test/basic/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/button/test/basic/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/button/test/basic/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/button/test/basic/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/button/test/basic/pages/page-one/page-one.ts

@@ -1,11 +1,10 @@
-import { NgModule, Component } from '@angular/core';
-import { IonicApp, IonicModule, App } from '../../../../../ionic-angular';
-
+import { Component } from '@angular/core';
+import { App } from '../../../../../..';
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page-one.html'
 })
-export class E2EPage {
+export class PageOne {
   btnColor: string;
   testingColors = ['primary', 'secondary', 'danger', 'dark'];
   testingColorIndex = 0;
@@ -25,26 +24,3 @@ export class E2EPage {
     console.log(`button click from: ${ev.type}, timestamp: ${Date.now()}`);
   }
 }
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class E2EApp {
-  rootPage = E2EPage;
-}
-
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage
-  ]
-})
-export class AppModule {}

src/components/button/test/block/app.module.ts

@@ -1,38 +0,0 @@
-import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../../../../../ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class E2EPage {
-  blockButton = true;
-
-  toggleBlock() {
-    this.blockButton = !this.blockButton;
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class E2EApp {
-  rootPage = E2EPage;
-}
-
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage
-  ]
-})
-export class AppModule {}

src/components/button/test/block/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/button/test/block/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/button/test/block/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/button/test/block/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/button/test/block/pages/page-one/page-one.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  blockButton = true;
+
+  toggleBlock() {
+    this.blockButton = !this.blockButton;
+  }
+}

src/components/button/test/clear/app.module.ts

@@ -1,36 +0,0 @@
-import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../../../../../ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class E2EPage {
-  clearButton = true;
-
-  toggleClear() {
-    this.clearButton = !this.clearButton;
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class E2EApp {
-  rootPage = E2EPage;
-}
-
-@NgModule({
-  declarations: [
-    E2EApp,
-    E2EPage
-  ],
-  imports: [
-    IonicModule.forRoot(E2EApp)
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EPage
-  ]
-})
-export class AppModule {}

src/components/button/test/clear/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/button/test/clear/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

src/components/button/test/clear/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/components/button/test/clear/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    DeepLinkModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}