From d7be8a80c061c3de04ea65ff169647c5137988e7 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 13 Sep 2016 15:44:02 -0500
Subject: [PATCH] test(ngmodule): update to ngmodule

---
 .../test/basic/{index.ts => app-module.ts}    |   34 +-
 .../test/basic/{index.ts => app-module.ts}    |   31 +-
 .../test/dismiss/{index.ts => app-module.ts}  |   35 +-
 .../animations/{index.ts => app-module.ts}    |   30 +-
 src/components/app/test/app.spec.ts           |  151 +-
 .../test/cordova/{index.ts => app-module.ts}  |   50 +-
 .../{index.ts => app-module.ts}               |   28 +-
 .../app/test/gesture-collision/page1.html     |    2 +-
 .../app/test/gestures/app-module.ts           |   37 +
 src/components/app/test/gestures/index.ts     |   24 -
 src/components/app/test/ion.spec.ts           |   57 +
 .../test/storage/{index.ts => app-module.ts}  |   17 +-
 .../app/test/typography/app-module.ts         |   23 +
 src/components/app/test/typography/main.html  |   40 +
 src/components/badge/test/basic/app-module.ts |   62 +
 src/components/badge/test/basic/e2e.ts        |    2 +-
 src/components/badge/test/basic/index.ts      |   23 -
 src/components/badge/test/basic/main.html     |   20 +-
 .../attributes/{index.ts => app-module.ts}    |   29 +-
 .../test/basic/{index.ts => app-module.ts}    |   24 +-
 .../button/test/block/app-module.ts           |   38 +
 src/components/button/test/block/index.ts     |   23 -
 src/components/button/test/button.spec.ts     |  492 +++--
 .../button/test/clear/app-module.ts           |   36 +
 src/components/button/test/clear/index.ts     |   23 -
 .../test/dynamic/{index.ts => app-module.ts}  |   23 +-
 src/components/button/test/fab/app-module.ts  |   30 +
 src/components/button/test/fab/index.ts       |   17 -
 src/components/button/test/full/app-module.ts |   30 +
 src/components/button/test/full/index.ts      |   17 -
 .../button/test/icons/app-module.ts           |   30 +
 src/components/button/test/icons/index.ts     |   17 -
 .../button/test/outline/app-module.ts         |   36 +
 src/components/button/test/outline/index.ts   |   23 -
 .../button/test/raised/app-module.ts          |   30 +
 src/components/button/test/raised/index.ts    |   17 -
 .../button/test/round/app-module.ts           |   37 +
 src/components/button/test/round/index.ts     |   17 -
 .../button/test/sizes/app-module.ts           |   31 +
 src/components/button/test/sizes/index.ts     |   17 -
 .../card/test/advanced/app-module.ts          |   30 +
 src/components/card/test/advanced/index.ts    |   17 -
 src/components/card/test/basic/app-module.ts  |   31 +
 src/components/card/test/basic/index.ts       |   17 -
 src/components/card/test/images/app-module.ts |   31 +
 src/components/card/test/images/index.ts      |   17 -
 src/components/card/test/list/app-module.ts   |   30 +
 src/components/card/test/list/index.ts        |   17 -
 src/components/card/test/map/app-module.ts    |   30 +
 src/components/card/test/map/index.ts         |   17 -
 src/components/card/test/social/app-module.ts |   30 +
 src/components/card/test/social/index.ts      |   17 -
 .../test/basic/{index.ts => app-module.ts}    |   44 +-
 src/components/checkbox/test/basic/e2e.ts     |    2 +-
 src/components/checkbox/test/basic/main.html  |   24 +-
 src/components/chip/test/basic/app-module.ts  |   34 +
 .../child-navs => chip/test/basic}/e2e.ts     |    0
 src/components/chip/test/basic/index.ts       |   21 -
 .../test/basic/{index.ts => app-module.ts}    |   45 +-
 .../content/test/fullscreen/app-module.ts     |   88 +
 .../content/test/fullscreen/index.ts          |   64 -
 .../test/basic/{index.ts => app-module.ts}    |   24 +-
 src/components/datetime/test/basic/e2e.ts     |    2 +-
 src/components/datetime/test/datetime.spec.ts |   31 +-
 .../datetime/test/labels/app-module.ts        |   41 +
 src/components/datetime/test/labels/index.ts  |   23 -
 .../grid/test/alignment/app-module.ts         |   33 +
 src/components/grid/test/alignment/index.ts   |   17 -
 src/components/grid/test/basic/app-module.ts  |   31 +
 src/components/grid/test/basic/index.ts       |   17 -
 src/components/grid/test/full/app-module.ts   |   31 +
 src/components/grid/test/full/index.ts        |   17 -
 .../test/basic/{index.ts => app-module.ts}    |   23 +-
 .../test/basic/{index.ts => app-module.ts}    |   28 +-
 .../test/infinite-scroll.spec.ts              |   71 +-
 .../short-list/{index.ts => app-module.ts}    |   23 +-
 .../input/test/clear-input/app-module.ts      |   36 +
 .../input/test/clear-input/index.ts           |   23 -
 .../test/fixed-inline-labels/app-module.ts    |   37 +
 .../input/test/fixed-inline-labels/index.ts   |   24 -
 .../input/test/floating-labels/app-module.ts  |   37 +
 .../input/test/floating-labels/index.ts       |   24 -
 .../form-inputs/{index.ts => app-module.ts}   |   30 +-
 .../highlight/{index.ts => app-module.ts}     |   29 +-
 .../input/test/inline-labels/app-module.ts    |   35 +
 .../input/test/inline-labels/index.ts         |   22 -
 .../input-focus/{index.ts => app-module.ts}   |   23 +-
 .../input/test/input-focus/main.html          |    2 +-
 .../input/test/inset-inputs/app-module.ts     |   31 +
 .../input/test/inset-inputs/index.ts          |   17 -
 .../test/placeholder-labels/app-module.ts     |   31 +
 .../input/test/placeholder-labels/index.ts    |   17 -
 .../input/test/stacked-labels/app-module.ts   |   34 +
 .../input/test/stacked-labels/index.ts        |   18 -
 src/components/input/test/text-input.spec.ts  |    8 +-
 .../item/test/buttons/app-module.ts           |   35 +
 src/components/item/test/buttons/index.ts     |   21 -
 .../item/test/dividers/app-module.ts          |   31 +
 src/components/item/test/dividers/index.ts    |   17 -
 .../test/groups/{index.ts => app-module.ts}   |   28 +-
 src/components/item/test/icons/app-module.ts  |   31 +
 src/components/item/test/icons/index.ts       |   17 -
 src/components/item/test/images/app-module.ts |   31 +
 src/components/item/test/images/index.ts      |   17 -
 src/components/item/test/media/app-module.ts  |   31 +
 src/components/item/test/media/index.ts       |   17 -
 .../test/reorder/{index.ts => app-module.ts}  |   24 +-
 src/components/item/test/reorder/e2e.ts       |    1 -
 .../test/sliding/{index.ts => app-module.ts}  |   28 +-
 src/components/item/test/sliding/main.html    |    2 +-
 src/components/item/test/text/app-module.ts   |   31 +
 src/components/item/test/text/index.ts        |   17 -
 .../list/test/header-scenarios/app-module.ts  |   36 +
 .../list/test/header-scenarios/index.ts       |   22 -
 .../list/test/header-scenarios/main.html      |   12 +-
 .../list/test/headers/app-module.ts           |   31 +
 src/components/list/test/headers/index.ts     |   17 -
 src/components/list/test/inset/app-module.ts  |   31 +
 src/components/list/test/inset/index.ts       |   17 -
 .../list/test/no-lines/app-module.ts          |   31 +
 src/components/list/test/no-lines/index.ts    |   17 -
 .../list/test/repeat-headers/app-module.ts    |   37 +
 .../list/test/repeat-headers/index.ts         |   23 -
 .../test/sticky/{index.ts => app-module.ts}   |   24 +-
 .../test/basic/{index.ts => app-module.ts}    |   86 +-
 src/components/loading/test/basic/main.html   |    4 +
 src/components/loading/test/basic/styles.css  |   61 -
 .../test/tabs/{index.ts => app-module.ts}     |   36 +-
 .../test/basic/{index.ts => app-module.ts}    |   36 +-
 src/components/menu/test/basic/page1.html     |    2 +-
 src/components/menu/test/basic/page3.html     |    2 +-
 .../disable-swipe/{index.ts => app-module.ts} |   24 +-
 .../{index.ts => app-module.ts}               |   28 +-
 src/components/menu/test/menu.spec.ts         |  462 +++--
 .../test/multiple/{index.ts => app-module.ts} |   24 +-
 .../{push/index.ts => overlay/app-module.ts}  |   24 +-
 src/components/menu/test/overlay/page1.html   |    2 +-
 .../{overlay/index.ts => push/app-module.ts}  |   24 +-
 src/components/menu/test/push/page1.html      |    2 +-
 .../test/reveal/{index.ts => app-module.ts}   |   24 +-
 src/components/menu/test/reveal/page1.html    |    2 +-
 .../test/basic/{index.ts => app-module.ts}    |  166 +-
 src/components/modal/test/basic/main.html     |    3 -
 src/components/modal/test/modal.spec.ts       |   26 +-
 .../test/basic/{index.ts => app-module.ts}    |  265 ++-
 .../child-navs/{index.ts => app-module.ts}    |   44 +-
 .../nav/test/init-async/app-module.ts         |   43 +
 src/components/nav/test/init-async/index.ts   |   29 -
 .../insert-views/{index.ts => app-module.ts}  |   32 +-
 .../test/memory/{index.ts => app-module.ts}   |   37 +-
 .../nav/test/nav-controller.spec.ts           | 1616 -----------------
 src/components/nav/test/nested/index.ts       |  173 --
 .../test/basic/{index.ts => app-module.ts}    |   24 +-
 src/components/picker/test/basic/e2e.ts       |    0
 .../test/basic/{index.ts => app-module.ts}    |   41 +-
 src/components/popover/test/basic/main.html   |    4 +
 src/components/popover/test/basic/style.css   |  122 --
 .../test/basic/{index.ts => app-module.ts}    |   56 +-
 src/components/radio/test/basic/main.html     |    8 +-
 src/components/radio/test/radio.spec.ts       |  222 ++-
 .../test/basic/{index.ts => app-module.ts}    |   24 +-
 .../test/basic/{index.ts => app-module.ts}    |   24 +-
 .../scroll/test/basic/app-module.ts           |   26 +
 src/components/scroll/test/basic/index.ts     |   14 -
 .../test/basic/{index.ts => app-module.ts}    |   24 +-
 .../test/nav/{index.ts => app-module.ts}      |   36 +-
 .../searchbar/test/toolbar/app-module.ts      |   36 +
 .../searchbar/test/toolbar/index.ts           |   22 -
 .../test/basic/{index.ts => app-module.ts}    |   24 +-
 .../test/nav/{index.ts => app-module.ts}      |   28 +-
 .../test/swipe/{index.ts => app-module.ts}    |   40 +-
 .../{index.ts => app-module.ts}               |   24 +-
 .../select/test/multiple-value/e2e.ts         |    2 +-
 .../single-value/{index.ts => app-module.ts}  |   25 +-
 .../select/test/single-value/e2e.ts           |    2 +-
 .../show-hide-when/test/basic/app-module.ts   |   34 +
 .../show-hide-when/test/basic/index.ts        |   18 -
 .../test/basic/{index.ts => app-module.ts}    |   20 +-
 .../controller/{index.ts => app-module.ts}    |   24 +-
 .../test/intro/{index.ts => app-module.ts}    |   28 +-
 .../test/loop/{index.ts => app-module.ts}     |   20 +-
 .../slides/test/scroll/app-module.ts          |   22 +
 src/components/slides/test/scroll/index.ts    |   10 -
 .../spinner/test/basic/app-module.ts          |   38 +
 src/components/spinner/test/basic/index.ts    |   24 -
 .../spinner/test/colors/app-module.ts         |   38 +
 src/components/spinner/test/colors/index.ts   |   24 -
 .../test/advanced/{index.ts => app-module.ts} |  168 +-
 src/components/tabs/test/advanced/e2e.ts      |   38 +-
 src/components/tabs/test/advanced/signIn.html |    6 +-
 .../tabs/test/advanced/tab1page1.html         |    6 +-
 .../tabs/test/advanced/tab1page2.html         |    8 +-
 .../tabs/test/advanced/tab1page3.html         |    6 +-
 .../tabs/test/advanced/tab2page1.html         |    6 +-
 .../tabs/test/advanced/tab2page2.html         |    8 +-
 .../tabs/test/advanced/tab2page3.html         |    4 +-
 src/components/tabs/test/advanced/tabs.html   |    6 +-
 src/components/tabs/test/badges/app-module.ts |   31 +
 src/components/tabs/test/badges/index.ts      |   18 -
 src/components/tabs/test/badges/main.html     |    3 +
 src/components/tabs/test/badges/styles.css    |   12 -
 .../test/basic/{index.ts => app-module.ts}    |   30 +-
 src/components/tabs/test/child-navs/index.ts  |  148 --
 src/components/tabs/test/colors/app-module.ts |   31 +
 src/components/tabs/test/colors/index.ts      |   18 -
 src/components/tabs/test/colors/main.html     |    3 +
 src/components/tabs/test/colors/styles.css    |   12 -
 .../test/ghost/{index.ts => app-module.ts}    |   36 +-
 .../tabs/test/tab-bar-scenarios/app-module.ts |   31 +
 .../tabs/test/tab-bar-scenarios/index.ts      |   18 -
 .../tabs/test/tab-bar-scenarios/main.html     |    3 +
 .../tabs/test/tab-bar-scenarios/styles.css    |   12 -
 src/components/tabs/test/tabs.spec.ts         |   75 +-
 .../tap-click/test/tapClick.spec.ts           |   60 +-
 .../test/basic/{index.ts => app-module.ts}    |   28 +-
 src/components/toast/test/toast.spec.ts       |    9 +-
 .../test/basic/{index.ts => app-module.ts}    |   44 +-
 src/components/toggle/test/basic/e2e.ts       |    2 +-
 src/components/toggle/test/basic/main.html    |   24 +-
 .../toolbar/test/colors/app-module.ts         |   28 +
 src/components/toolbar/test/colors/index.ts   |   16 -
 .../toolbar/test/scenarios/app-module.ts      |   28 +
 .../toolbar/test/scenarios/index.ts           |   16 -
 .../typography/test/basic/app-module.ts       |   33 +
 src/components/typography/test/basic/index.ts |   23 -
 .../typography/test/basic/main.html           |    7 +
 .../test/basic/{index.ts => app-module.ts}    |   29 +-
 .../test/cards/{index.ts => app-module.ts}    |   29 +-
 .../image-gallery/{index.ts => app-module.ts} |   29 +-
 .../sliding-item/{index.ts => app-module.ts}  |   29 +-
 .../variable-size/{index.ts => app-module.ts} |   29 +-
 .../test/virtual-scroll.spec.ts               |   24 +-
 232 files changed, 4612 insertions(+), 4893 deletions(-)
 rename src/components/action-sheet/test/basic/{index.ts => app-module.ts} (85%)
 rename src/components/alert/test/basic/{index.ts => app-module.ts} (92%)
 rename src/components/alert/test/dismiss/{index.ts => app-module.ts} (85%)
 rename src/components/app/test/animations/{index.ts => app-module.ts} (68%)
 rename src/components/app/test/cordova/{index.ts => app-module.ts} (77%)
 rename src/components/app/test/gesture-collision/{index.ts => app-module.ts} (74%)
 create mode 100644 src/components/app/test/gestures/app-module.ts
 delete mode 100644 src/components/app/test/gestures/index.ts
 create mode 100644 src/components/app/test/ion.spec.ts
 rename src/components/app/test/storage/{index.ts => app-module.ts} (71%)
 create mode 100644 src/components/app/test/typography/app-module.ts
 create mode 100644 src/components/app/test/typography/main.html
 create mode 100644 src/components/badge/test/basic/app-module.ts
 delete mode 100644 src/components/badge/test/basic/index.ts
 rename src/components/button/test/attributes/{index.ts => app-module.ts} (75%)
 rename src/components/button/test/basic/{index.ts => app-module.ts} (62%)
 create mode 100644 src/components/button/test/block/app-module.ts
 delete mode 100644 src/components/button/test/block/index.ts
 create mode 100644 src/components/button/test/clear/app-module.ts
 delete mode 100644 src/components/button/test/clear/index.ts
 rename src/components/button/test/dynamic/{index.ts => app-module.ts} (74%)
 create mode 100644 src/components/button/test/fab/app-module.ts
 delete mode 100644 src/components/button/test/fab/index.ts
 create mode 100644 src/components/button/test/full/app-module.ts
 delete mode 100644 src/components/button/test/full/index.ts
 create mode 100644 src/components/button/test/icons/app-module.ts
 delete mode 100644 src/components/button/test/icons/index.ts
 create mode 100644 src/components/button/test/outline/app-module.ts
 delete mode 100644 src/components/button/test/outline/index.ts
 create mode 100644 src/components/button/test/raised/app-module.ts
 delete mode 100644 src/components/button/test/raised/index.ts
 create mode 100644 src/components/button/test/round/app-module.ts
 delete mode 100644 src/components/button/test/round/index.ts
 create mode 100644 src/components/button/test/sizes/app-module.ts
 delete mode 100644 src/components/button/test/sizes/index.ts
 create mode 100644 src/components/card/test/advanced/app-module.ts
 delete mode 100644 src/components/card/test/advanced/index.ts
 create mode 100644 src/components/card/test/basic/app-module.ts
 delete mode 100644 src/components/card/test/basic/index.ts
 create mode 100644 src/components/card/test/images/app-module.ts
 delete mode 100644 src/components/card/test/images/index.ts
 create mode 100644 src/components/card/test/list/app-module.ts
 delete mode 100644 src/components/card/test/list/index.ts
 create mode 100644 src/components/card/test/map/app-module.ts
 delete mode 100644 src/components/card/test/map/index.ts
 create mode 100644 src/components/card/test/social/app-module.ts
 delete mode 100644 src/components/card/test/social/index.ts
 rename src/components/checkbox/test/basic/{index.ts => app-module.ts} (61%)
 create mode 100644 src/components/chip/test/basic/app-module.ts
 rename src/components/{tabs/test/child-navs => chip/test/basic}/e2e.ts (100%)
 delete mode 100644 src/components/chip/test/basic/index.ts
 rename src/components/content/test/basic/{index.ts => app-module.ts} (54%)
 create mode 100644 src/components/content/test/fullscreen/app-module.ts
 delete mode 100644 src/components/content/test/fullscreen/index.ts
 rename src/components/datetime/test/basic/{index.ts => app-module.ts} (71%)
 create mode 100644 src/components/datetime/test/labels/app-module.ts
 delete mode 100644 src/components/datetime/test/labels/index.ts
 create mode 100644 src/components/grid/test/alignment/app-module.ts
 delete mode 100644 src/components/grid/test/alignment/index.ts
 create mode 100644 src/components/grid/test/basic/app-module.ts
 delete mode 100644 src/components/grid/test/basic/index.ts
 create mode 100644 src/components/grid/test/full/app-module.ts
 delete mode 100644 src/components/grid/test/full/index.ts
 rename src/components/icon/test/basic/{index.ts => app-module.ts} (62%)
 rename src/components/infinite-scroll/test/basic/{index.ts => app-module.ts} (75%)
 rename src/components/infinite-scroll/test/short-list/{index.ts => app-module.ts} (72%)
 create mode 100644 src/components/input/test/clear-input/app-module.ts
 delete mode 100644 src/components/input/test/clear-input/index.ts
 create mode 100644 src/components/input/test/fixed-inline-labels/app-module.ts
 delete mode 100644 src/components/input/test/fixed-inline-labels/index.ts
 create mode 100644 src/components/input/test/floating-labels/app-module.ts
 delete mode 100644 src/components/input/test/floating-labels/index.ts
 rename src/components/input/test/form-inputs/{index.ts => app-module.ts} (71%)
 rename src/components/input/test/highlight/{index.ts => app-module.ts} (66%)
 create mode 100644 src/components/input/test/inline-labels/app-module.ts
 delete mode 100644 src/components/input/test/inline-labels/index.ts
 rename src/components/input/test/input-focus/{index.ts => app-module.ts} (76%)
 create mode 100644 src/components/input/test/inset-inputs/app-module.ts
 delete mode 100644 src/components/input/test/inset-inputs/index.ts
 create mode 100644 src/components/input/test/placeholder-labels/app-module.ts
 delete mode 100644 src/components/input/test/placeholder-labels/index.ts
 create mode 100644 src/components/input/test/stacked-labels/app-module.ts
 delete mode 100644 src/components/input/test/stacked-labels/index.ts
 create mode 100644 src/components/item/test/buttons/app-module.ts
 delete mode 100644 src/components/item/test/buttons/index.ts
 create mode 100644 src/components/item/test/dividers/app-module.ts
 delete mode 100644 src/components/item/test/dividers/index.ts
 rename src/components/item/test/groups/{index.ts => app-module.ts} (98%)
 create mode 100644 src/components/item/test/icons/app-module.ts
 delete mode 100644 src/components/item/test/icons/index.ts
 create mode 100644 src/components/item/test/images/app-module.ts
 delete mode 100644 src/components/item/test/images/index.ts
 create mode 100644 src/components/item/test/media/app-module.ts
 delete mode 100644 src/components/item/test/media/index.ts
 rename src/components/item/test/reorder/{index.ts => app-module.ts} (54%)
 delete mode 100644 src/components/item/test/reorder/e2e.ts
 rename src/components/item/test/sliding/{index.ts => app-module.ts} (79%)
 create mode 100644 src/components/item/test/text/app-module.ts
 delete mode 100644 src/components/item/test/text/index.ts
 create mode 100644 src/components/list/test/header-scenarios/app-module.ts
 delete mode 100644 src/components/list/test/header-scenarios/index.ts
 create mode 100644 src/components/list/test/headers/app-module.ts
 delete mode 100644 src/components/list/test/headers/index.ts
 create mode 100644 src/components/list/test/inset/app-module.ts
 delete mode 100644 src/components/list/test/inset/index.ts
 create mode 100644 src/components/list/test/no-lines/app-module.ts
 delete mode 100644 src/components/list/test/no-lines/index.ts
 create mode 100644 src/components/list/test/repeat-headers/app-module.ts
 delete mode 100644 src/components/list/test/repeat-headers/index.ts
 rename src/components/list/test/sticky/{index.ts => app-module.ts} (59%)
 rename src/components/loading/test/basic/{index.ts => app-module.ts} (78%)
 delete mode 100644 src/components/loading/test/basic/styles.css
 rename src/components/loading/test/tabs/{index.ts => app-module.ts} (69%)
 rename src/components/menu/test/basic/{index.ts => app-module.ts} (77%)
 rename src/components/menu/test/disable-swipe/{index.ts => app-module.ts} (60%)
 rename src/components/menu/test/enable-disable/{index.ts => app-module.ts} (66%)
 rename src/components/menu/test/multiple/{index.ts => app-module.ts} (55%)
 rename src/components/menu/test/{push/index.ts => overlay/app-module.ts} (60%)
 rename src/components/menu/test/{overlay/index.ts => push/app-module.ts} (60%)
 rename src/components/menu/test/reveal/{index.ts => app-module.ts} (52%)
 rename src/components/modal/test/basic/{index.ts => app-module.ts} (80%)
 rename src/components/nav/test/basic/{index.ts => app-module.ts} (65%)
 rename src/components/nav/test/child-navs/{index.ts => app-module.ts} (73%)
 create mode 100644 src/components/nav/test/init-async/app-module.ts
 delete mode 100644 src/components/nav/test/init-async/index.ts
 rename src/components/nav/test/insert-views/{index.ts => app-module.ts} (68%)
 rename src/components/nav/test/memory/{index.ts => app-module.ts} (68%)
 delete mode 100644 src/components/nav/test/nav-controller.spec.ts
 delete mode 100644 src/components/nav/test/nested/index.ts
 rename src/components/picker/test/basic/{index.ts => app-module.ts} (92%)
 create mode 100644 src/components/picker/test/basic/e2e.ts
 rename src/components/popover/test/basic/{index.ts => app-module.ts} (85%)
 delete mode 100644 src/components/popover/test/basic/style.css
 rename src/components/radio/test/basic/{index.ts => app-module.ts} (59%)
 rename src/components/range/test/basic/{index.ts => app-module.ts} (52%)
 rename src/components/refresher/test/basic/{index.ts => app-module.ts} (81%)
 create mode 100644 src/components/scroll/test/basic/app-module.ts
 delete mode 100644 src/components/scroll/test/basic/index.ts
 rename src/components/searchbar/test/basic/{index.ts => app-module.ts} (72%)
 rename src/components/searchbar/test/nav/{index.ts => app-module.ts} (76%)
 create mode 100644 src/components/searchbar/test/toolbar/app-module.ts
 delete mode 100644 src/components/searchbar/test/toolbar/index.ts
 rename src/components/segment/test/basic/{index.ts => app-module.ts} (70%)
 rename src/components/segment/test/nav/{index.ts => app-module.ts} (58%)
 rename src/components/segment/test/swipe/{index.ts => app-module.ts} (51%)
 rename src/components/select/test/multiple-value/{index.ts => app-module.ts} (73%)
 rename src/components/select/test/single-value/{index.ts => app-module.ts} (80%)
 create mode 100644 src/components/show-hide-when/test/basic/app-module.ts
 delete mode 100644 src/components/show-hide-when/test/basic/index.ts
 rename src/components/slides/test/basic/{index.ts => app-module.ts} (75%)
 rename src/components/slides/test/controller/{index.ts => app-module.ts} (70%)
 rename src/components/slides/test/intro/{index.ts => app-module.ts} (71%)
 rename src/components/slides/test/loop/{index.ts => app-module.ts} (65%)
 create mode 100644 src/components/slides/test/scroll/app-module.ts
 delete mode 100644 src/components/slides/test/scroll/index.ts
 create mode 100644 src/components/spinner/test/basic/app-module.ts
 delete mode 100644 src/components/spinner/test/basic/index.ts
 create mode 100644 src/components/spinner/test/colors/app-module.ts
 delete mode 100644 src/components/spinner/test/colors/index.ts
 rename src/components/tabs/test/advanced/{index.ts => app-module.ts} (59%)
 create mode 100644 src/components/tabs/test/badges/app-module.ts
 delete mode 100644 src/components/tabs/test/badges/index.ts
 delete mode 100644 src/components/tabs/test/badges/styles.css
 rename src/components/tabs/test/basic/{index.ts => app-module.ts} (92%)
 delete mode 100644 src/components/tabs/test/child-navs/index.ts
 create mode 100644 src/components/tabs/test/colors/app-module.ts
 delete mode 100644 src/components/tabs/test/colors/index.ts
 delete mode 100644 src/components/tabs/test/colors/styles.css
 rename src/components/tabs/test/ghost/{index.ts => app-module.ts} (80%)
 create mode 100644 src/components/tabs/test/tab-bar-scenarios/app-module.ts
 delete mode 100644 src/components/tabs/test/tab-bar-scenarios/index.ts
 delete mode 100644 src/components/tabs/test/tab-bar-scenarios/styles.css
 rename src/components/toast/test/basic/{index.ts => app-module.ts} (80%)
 rename src/components/toggle/test/basic/{index.ts => app-module.ts} (62%)
 create mode 100644 src/components/toolbar/test/colors/app-module.ts
 delete mode 100644 src/components/toolbar/test/colors/index.ts
 create mode 100644 src/components/toolbar/test/scenarios/app-module.ts
 delete mode 100644 src/components/toolbar/test/scenarios/index.ts
 create mode 100644 src/components/typography/test/basic/app-module.ts
 delete mode 100644 src/components/typography/test/basic/index.ts
 rename src/components/virtual-scroll/test/basic/{index.ts => app-module.ts} (65%)
 rename src/components/virtual-scroll/test/cards/{index.ts => app-module.ts} (78%)
 rename src/components/virtual-scroll/test/image-gallery/{index.ts => app-module.ts} (81%)
 rename src/components/virtual-scroll/test/sliding-item/{index.ts => app-module.ts} (65%)
 rename src/components/virtual-scroll/test/variable-size/{index.ts => app-module.ts} (57%)

diff --git a/src/components/action-sheet/test/basic/index.ts b/src/components/action-sheet/test/basic/app-module.ts
similarity index 85%
rename from src/components/action-sheet/test/basic/index.ts
rename to src/components/action-sheet/test/basic/app-module.ts
index 15b170d6a9..4fe2cc5140 100644
--- a/src/components/action-sheet/test/basic/index.ts
+++ b/src/components/action-sheet/test/basic/app-module.ts
@@ -1,14 +1,13 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, ActionSheetController, AlertController, ModalController, ViewController, Platform } from '../../../../../src';
-
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, ActionSheetController, AlertController, ModalController, ViewController, Platform } from '../../../..';
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   result: string = '';
 
-  constructor(private actionSheetCtrl: ActionSheetController, private alertCtrl: AlertController, private modalCtrl: ModalController, private platform: Platform) {}
+  constructor(public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public modalCtrl: ModalController, public platform: Platform) {}
 
   presentActionSheet1() {
     this.result = '';
@@ -168,8 +167,9 @@ class E2EPage {
     </ion-content>
   `
 })
-class ModalPage {
-  constructor(private viewCtrl: ViewController) {}
+export class ModalPage {
+
+  constructor(public viewCtrl: ViewController) {}
 
   dismiss() {
     this.viewCtrl.dismiss();
@@ -180,8 +180,24 @@ class ModalPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    ModalPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage,
+    ModalPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/alert/test/basic/index.ts b/src/components/alert/test/basic/app-module.ts
similarity index 92%
rename from src/components/alert/test/basic/index.ts
rename to src/components/alert/test/basic/app-module.ts
index a262b556b5..61620eb60b 100644
--- a/src/components/alert/test/basic/index.ts
+++ b/src/components/alert/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, AlertController, ModalController, ViewController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, AlertController, ModalController, ViewController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   testConfirmOpen: boolean = false;
   testPromptOpen: boolean = false;
   testConfirmResult: string = '';
@@ -263,7 +263,7 @@ class E2EPage {
 
     setTimeout(() => {
       alert.dismiss();
-    }, 200);
+    }, 120);
   }
 
   doDisabledBackdropAlert() {
@@ -304,11 +304,11 @@ class E2EPage {
     </ion-header>
     <ion-content padding>
       Hi, I'm Bob, and I'm a modal.
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <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>
   `
 })
-class ModalPage {
+export class ModalPage {
   constructor(private viewCtrl: ViewController) {}
 
   dismiss() {
@@ -320,8 +320,23 @@ class ModalPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    ModalPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage,
+    ModalPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/alert/test/dismiss/index.ts b/src/components/alert/test/dismiss/app-module.ts
similarity index 85%
rename from src/components/alert/test/dismiss/index.ts
rename to src/components/alert/test/dismiss/app-module.ts
index 5203c1d7f1..d0903db1c2 100644
--- a/src/components/alert/test/dismiss/index.ts
+++ b/src/components/alert/test/dismiss/app-module.ts
@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, AlertController, LoadingController, NavController } from '../../../../../src';
-import { FormBuilder, ControlGroup, Validators } from '@angular/common';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, AlertController, LoadingController, NavController } from '../../../..';
+import { FormBuilder, Validators } from '@angular/forms';
 
 
 @Component({
@@ -52,9 +52,9 @@ export class E2EPage {
     <ion-content padding>
       <form [formGroup]="form" (ngSubmit)="submit(form.value)">
         <ion-list>
-          <ion-item [class.error]="!form.controls.name.valid && form.controls.name.touched">
+          <ion-item>
             <ion-label>Name</ion-label>
-            <ion-input type="text" [(formControl)]="form.controls.name"></ion-input>
+            <ion-input name="firstName" type="text"></ion-input>
           </ion-item>
         </ion-list>
         <div padding style="padding-top: 0 !important;">
@@ -69,12 +69,12 @@ export class E2EPage {
     </ion-content>
   `
 })
-class AnotherPage {
-  form: ControlGroup;
+export class AnotherPage {
+  form: any;
 
   constructor(public navCtrl: NavController, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public builder: FormBuilder) {
     this.form = builder.group({
-      name: builder.control('', Validators.compose([
+      firstName: builder.control('', Validators.compose([
         Validators.required,
         Validators.minLength(5)
       ]))
@@ -169,8 +169,23 @@ class AnotherPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    AnotherPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage,
+    AnotherPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/app/test/animations/index.ts b/src/components/app/test/animations/app-module.ts
similarity index 68%
rename from src/components/app/test/animations/index.ts
rename to src/components/app/test/animations/app-module.ts
index 2687c1e00f..f1ed06c7a5 100644
--- a/src/components/app/test/animations/index.ts
+++ b/src/components/app/test/animations/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, Config, Animation } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Config, Animation } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   duration: string;
   easing: string;
 
@@ -19,7 +19,7 @@ class E2EPage {
   playGreen() {
     let a = new Animation('.green');
     a.fromTo('translateX', '0px', '200px');
-    a.duration(parseInt(this.duration));
+    a.duration(parseInt(this.duration, 10));
     a.easing(this.easing);
     a.play();
   }
@@ -39,7 +39,7 @@ class E2EPage {
 
       let a = new Animation('.green');
       a.fromTo('translateX', '0px', '200px');
-      a.duration(parseInt(self.duration));
+      a.duration(parseInt(self.duration, 10));
       a.easing(self.easing);
       a.onFinish((animation: Animation) => {
         setTimeout(() => {
@@ -58,10 +58,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp, null, {
-  prodMode: true
-});
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/app/test/app.spec.ts b/src/components/app/test/app.spec.ts
index 4a429bf55f..40012e6002 100644
--- a/src/components/app/test/app.spec.ts
+++ b/src/components/app/test/app.spec.ts
@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
-import { App, Config, Nav, NavOptions, Platform, Tab, Tabs, ViewController } from '../../../../src';
-import { mockNavController, mockTab, mockTabs } from '../../../../src/util/mock-providers';
+import { App } from '../app';
+import { Config } from '../../../config/config';
+import { mockApp, mockConfig, mockNavController, mockPlatform, mockTab, mockTabs, mockView, mockViews } from '../../../util/mock-providers';
+import { OverlayPortal } from '../../nav/overlay-portal';
+import { Platform } from '../../../platform/platform';
 
-export function run() {
 
 describe('App', () => {
 
@@ -10,9 +11,7 @@ describe('App', () => {
 
     it('should select the previous tab', () => {
       let nav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       let tabs = mockTabs();
       let tab1 = mockTab(tabs);
@@ -22,7 +21,7 @@ describe('App', () => {
       tabs.select(tab1);
       tabs.select(tab2);
 
-      expect(tabs.selectHistory).toEqual([tab1.id, tab2.id]);
+      expect(tabs._selectHistory).toEqual([tab1.id, tab2.id]);
 
       spyOn(platform, 'exitApp');
       spyOn(tabs, 'select');
@@ -41,14 +40,12 @@ describe('App', () => {
 
     it('should pop from the active tab, when tabs is nested is the root nav', () => {
       let nav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       let tabs = mockTabs();
-      let tab1 = mockTab(tabs);
+      mockTab(tabs);
       let tab2 = mockTab(tabs);
-      let tab3 = mockTab(tabs);
+      mockTab(tabs);
       nav.registerChildNav(tabs);
 
       tab2.setSelected(true);
@@ -57,8 +54,8 @@ describe('App', () => {
       spyOn(tab2, 'pop');
       spyOn(portal, 'pop');
 
-      let view1 = new ViewController();
-      let view2 = new ViewController();
+      let view1 = mockView();
+      let view2 = mockView();
       tab2._views = [view1, view2];
 
       app.navPop();
@@ -70,18 +67,18 @@ describe('App', () => {
 
     it('should pop from the active tab, when tabs is the root', () => {
       let tabs = mockTabs();
-      let tab1 = mockTab(tabs);
+      mockTab(tabs);
       let tab2 = mockTab(tabs);
-      let tab3 = mockTab(tabs);
-      app.setRootNav(tabs);
+      mockTab(tabs);
+      app._setRootNav(tabs);
 
       tab2.setSelected(true);
 
       spyOn(platform, 'exitApp');
       spyOn(tab2, 'pop');
 
-      let view1 = new ViewController();
-      let view2 = new ViewController();
+      let view1 = mockView();
+      let view2 = mockView();
       tab2._views = [view1, view2];
 
       app.navPop();
@@ -93,23 +90,21 @@ describe('App', () => {
     it('should pop the root nav when nested nav has less than 2 views', () => {
       let rootNav = mockNavController();
       let nestedNav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
       rootNav.registerChildNav(nestedNav);
       nestedNav.parent = rootNav;
-      app.setRootNav(rootNav);
+      app._setRootNav(rootNav);
 
       spyOn(platform, 'exitApp');
       spyOn(rootNav, 'pop');
       spyOn(nestedNav, 'pop');
       spyOn(portal, 'pop');
 
-      let rootView1 = new ViewController();
-      let rootView2 = new ViewController();
-      rootNav._views = [rootView1, rootView2];
+      let rootView1 = mockView();
+      let rootView2 = mockView();
+      mockViews(rootNav, [rootView1, rootView2]);
 
-      let nestedView1 = new ViewController();
-      nestedNav._views = [nestedView1];
+      let nestedView1 = mockView();
+      mockViews(nestedNav, [nestedView1]);
 
       app.navPop();
 
@@ -122,9 +117,7 @@ describe('App', () => {
     it('should pop a view from the nested nav that has more than 1 view', () => {
       let rootNav = mockNavController();
       let nestedNav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(rootNav);
+      app._setRootNav(rootNav);
       rootNav.registerChildNav(nestedNav);
 
       spyOn(platform, 'exitApp');
@@ -132,13 +125,13 @@ describe('App', () => {
       spyOn(nestedNav, 'pop');
       spyOn(portal, 'pop');
 
-      let rootView1 = new ViewController();
-      let rootView2 = new ViewController();
-      rootNav._views = [rootView1, rootView2];
+      let rootView1 = mockView();
+      let rootView2 = mockView();
+      mockViews(rootNav, [rootView1, rootView2]);
 
-      let nestedView1 = new ViewController();
-      let nestedView2 = new ViewController();
-      nestedNav._views = [nestedView1, nestedView2];
+      let nestedView1 = mockView();
+      let nestedView2 = mockView();
+      mockViews(nestedNav, [nestedView1, nestedView2]);
 
       app.navPop();
 
@@ -150,20 +143,18 @@ describe('App', () => {
 
     it('should pop the overlay in the portal of the root nav', () => {
       let nav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       spyOn(platform, 'exitApp');
       spyOn(nav, 'pop');
       spyOn(portal, 'pop');
 
-      let view1 = new ViewController();
-      let view2 = new ViewController();
-      nav._views = [view1, view2];
+      let view1 = mockView();
+      let view2 = mockView();
+      mockViews(nav, [view1, view2]);
 
-      let overlay = new ViewController();
-      portal._views = [overlay];
+      let overlay1 = mockView();
+      mockViews(portal, [overlay1]);
 
       app.navPop();
 
@@ -174,17 +165,15 @@ describe('App', () => {
 
     it('should pop the second view in the root nav', () => {
       let nav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       spyOn(platform, 'exitApp');
       spyOn(nav, 'pop');
       spyOn(portal, 'pop');
 
-      let view1 = new ViewController();
-      let view2 = new ViewController();
-      nav._views = [view1, view2];
+      let view1 = mockView();
+      let view2 = mockView();
+      mockViews(nav, [view1, view2]);
 
       app.navPop();
 
@@ -195,16 +184,14 @@ describe('App', () => {
 
     it('should exit app when only one view in the root nav', () => {
       let nav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       spyOn(platform, 'exitApp');
       spyOn(nav, 'pop');
       spyOn(portal, 'pop');
 
-      let view1 = new ViewController();
-      nav._views = [view1];
+      let view1 = mockView();
+      mockViews(nav, [view1]);
 
       expect(app.getActiveNav()).toBe(nav);
       expect(nav.first()).toBe(view1);
@@ -218,9 +205,7 @@ describe('App', () => {
 
     it('should not exit app when only one view in the root nav, but navExitApp config set', () => {
       let nav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       spyOn(platform, 'exitApp');
       spyOn(nav, 'pop');
@@ -228,8 +213,8 @@ describe('App', () => {
 
       config.set('navExitApp', false);
 
-      let view1 = new ViewController();
-      nav._views = [view1];
+      let view1 = mockView();
+      mockViews(nav, [view1]);
 
       expect(app.getActiveNav()).toBe(nav);
       expect(nav.first()).toBe(view1);
@@ -243,16 +228,14 @@ describe('App', () => {
 
     it('should not go back if app is not enabled', () => {
       let nav = mockNavController();
-      let portal = mockNavController();
-      app.setPortal(portal);
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       spyOn(platform, 'exitApp');
       spyOn(nav, 'pop');
       spyOn(portal, 'pop');
 
-      let view1 = new ViewController();
-      nav._views = [view1];
+      let view1 = mockView();
+      mockViews(nav, [view1]);
 
       app.setEnabled(false, 10000);
 
@@ -277,7 +260,7 @@ describe('App', () => {
 
     it('should get active NavController when using tabs with nested nav', () => {
       let nav = mockNavController();
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       let tabs = mockTabs();
       let tab1 = mockTab(tabs);
@@ -297,10 +280,10 @@ describe('App', () => {
 
     it('should get active NavController when using tabs, nested in a root nav', () => {
       let nav = mockNavController();
-      app.setRootNav(nav);
+      app._setRootNav(nav);
 
       let tabs = mockTabs();
-      let tab1 = mockTab(tabs);
+      mockTab(tabs);
       let tab2 = mockTab(tabs);
       let tab3 = mockTab(tabs);
       nav.registerChildNav(tabs);
@@ -316,10 +299,10 @@ describe('App', () => {
 
     it('should get active tab NavController when using tabs, and tabs is the root', () => {
       let tabs = mockTabs();
-      let tab1 = mockTab(tabs);
+      mockTab(tabs);
       let tab2 = mockTab(tabs);
       let tab3 = mockTab(tabs);
-      app.setRootNav(tabs);
+      app._setRootNav(tabs);
 
       tab2.setSelected(true);
 
@@ -334,7 +317,7 @@ describe('App', () => {
       let nav1 = mockNavController();
       let nav2 = mockNavController();
       let nav3 = mockNavController();
-      app.setRootNav(nav1);
+      app._setRootNav(nav1);
 
       nav1.registerChildNav(nav2);
       nav2.registerChildNav(nav3);
@@ -345,7 +328,7 @@ describe('App', () => {
     it('should get active NavController when nested 2 deep', () => {
       let nav1 = mockNavController();
       let nav2 = mockNavController();
-      app.setRootNav(nav1);
+      app._setRootNav(nav1);
 
       nav1.registerChildNav(nav2);
       expect(app.getActiveNav()).toBe(nav2);
@@ -353,13 +336,13 @@ describe('App', () => {
 
     it('should get active NavController when only one nav controller', () => {
       let nav = mockNavController();
-      app.setRootNav(nav);
+      app._setRootNav(nav);
       expect(app.getActiveNav()).toBe(nav);
     });
 
     it('should set/get the root nav controller', () => {
       let nav = mockNavController();
-      app.setRootNav(nav);
+      app._setRootNav(nav);
       expect(app.getRootNav()).toBe(nav);
     });
 
@@ -378,7 +361,7 @@ describe('App', () => {
 
       spyOn(mockClickBlock, 'activate');
 
-      app.clickBlock = mockClickBlock;
+      app._clickBlock = mockClickBlock;
 
       // act
       app.setEnabled(true);
@@ -395,7 +378,7 @@ describe('App', () => {
 
       spyOn(mockClickBlock, 'activate');
 
-      app.clickBlock = mockClickBlock;
+      app._clickBlock = mockClickBlock;
 
       // act
       app.setEnabled(false, 20);
@@ -412,7 +395,7 @@ describe('App', () => {
 
       spyOn(mockClickBlock, 'activate');
 
-      app.clickBlock = mockClickBlock;
+      app._clickBlock = mockClickBlock;
 
       // act
       app.setEnabled(false, 200);
@@ -429,7 +412,7 @@ describe('App', () => {
 
       spyOn(mockClickBlock, 'activate');
 
-      app.clickBlock = mockClickBlock;
+      app._clickBlock = mockClickBlock;
 
       // act
       app.setEnabled(false);
@@ -443,13 +426,13 @@ describe('App', () => {
   var app: App;
   var config: Config;
   var platform: Platform;
+  var portal: OverlayPortal;
 
   beforeEach(() => {
-    config = new Config();
-    platform = new Platform();
-    app = new App(config, platform);
+    config = mockConfig();
+    platform = mockPlatform();
+    app = mockApp(config, platform);
+    portal = app._appRoot._getPortal();
   });
 
 });
-
-}
diff --git a/src/components/app/test/cordova/index.ts b/src/components/app/test/cordova/app-module.ts
similarity index 77%
rename from src/components/app/test/cordova/index.ts
rename to src/components/app/test/cordova/app-module.ts
index d0352a99ec..d55f195c91 100644
--- a/src/components/app/test/cordova/index.ts
+++ b/src/components/app/test/cordova/app-module.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController, ModalController, ViewController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, NavController, ModalController, ViewController } from '../../../..';
 import { Injectable } from '@angular/core';
 
 
@@ -44,7 +44,7 @@ export class OtherData {
   </ion-content>
   `
 })
-class MyModal {
+export class MyModal {
   constructor(public viewCtrl: ViewController) {}
 
   dismissModal() {
@@ -56,7 +56,7 @@ class MyModal {
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
   page2 = Page2;
   sort: string = 'all';
 
@@ -74,7 +74,7 @@ class Page1 {
 @Component({
   templateUrl: 'page2.html'
 })
-class Page2 {
+export class Page2 {
   page1 = Page1;
   page3 = Page3;
 
@@ -89,7 +89,7 @@ class Page2 {
 @Component({
   templateUrl: 'page3.html'
 })
-class Page3 {
+export class Page3 {
   constructor(public navCtrl: NavController) {}
 
   goBack() {
@@ -118,13 +118,12 @@ class Page3 {
   </ion-content>
   `
 })
-class TabPage1 {}
-
+export class TabPage1 {}
 
 @Component({
   templateUrl: 'tabs.html'
 })
-class TabsPage {
+export class TabsPage {
   tab1Root = TabPage1;
   tab2Root = Page2;
   tab3Root = Page3;
@@ -140,10 +139,35 @@ class TabsPage {
 @Component({
   templateUrl: `./app.html`
 })
-class E2EApp {
+export class E2EApp {
   root = Page1;
 }
 
-ionicBootstrap(E2EApp, [SomeData, OtherData], {
-  statusbarPadding: true
-});
+
+@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 {}
diff --git a/src/components/app/test/gesture-collision/index.ts b/src/components/app/test/gesture-collision/app-module.ts
similarity index 74%
rename from src/components/app/test/gesture-collision/index.ts
rename to src/components/app/test/gesture-collision/app-module.ts
index 37d99e29c2..e24156c74d 100644
--- a/src/components/app/test/gesture-collision/index.ts
+++ b/src/components/app/test/gesture-collision/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, MenuController, NavController, AlertController, Nav, Refresher } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, MenuController, NavController, AlertController, Nav, Refresher } from '../../../..';
 
 
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
   constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}
 
   presentAlert() {
@@ -33,7 +33,7 @@ class Page1 {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   rootPage: any;
   changeDetectionCount: number = 0;
   pages: Array<{title: string, component: any}>;
@@ -63,8 +63,24 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/app/test/gesture-collision/page1.html b/src/components/app/test/gesture-collision/page1.html
index ee70532ca0..0b2df6e34e 100644
--- a/src/components/app/test/gesture-collision/page1.html
+++ b/src/components/app/test/gesture-collision/page1.html
@@ -95,6 +95,6 @@
     </ion-item-sliding>
   </ion-list>
 
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/app/test/gestures/app-module.ts b/src/components/app/test/gestures/app-module.ts
new file mode 100644
index 0000000000..3e85659317
--- /dev/null
+++ b/src/components/app/test/gestures/app-module.ts
@@ -0,0 +1,37 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+
+  onTap(ev: any) {
+    console.log('onTap', ev);
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/app/test/gestures/index.ts b/src/components/app/test/gestures/index.ts
deleted file mode 100644
index 18a5035a8e..0000000000
--- a/src/components/app/test/gestures/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-
-  onTap(ev) {
-    console.log('onTap', ev);
-  }
-
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/app/test/ion.spec.ts b/src/components/app/test/ion.spec.ts
new file mode 100644
index 0000000000..3b3a614b27
--- /dev/null
+++ b/src/components/app/test/ion.spec.ts
@@ -0,0 +1,57 @@
+import { Ion } from '../../ion';
+import { mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers';
+
+
+describe('Ion', () => {
+
+  describe('color', () => {
+
+    it('should set color when it hasnt been set yet', () => {
+      ion._setColor('icon', 'primary');
+      expect(hasClass(ion, 'icon-primary')).toEqual(true);
+    });
+
+    it('should remove color when it has already been set', () => {
+      ion._setColor('icon', 'primary');
+      ion._setColor('icon', null);
+      expect(hasClass(ion, 'icon-primary')).toEqual(false);
+    });
+
+    it('should update color when it has already been set', () => {
+      ion._setColor('icon', 'primary');
+      ion._setColor('icon', 'secondary');
+      expect(hasClass(ion, 'icon-primary')).toEqual(false);
+      expect(hasClass(ion, 'icon-secondary')).toEqual(true);
+    });
+
+    it('should not setElementClass if its the same value', () => {
+      ion._setColor('icon', 'primary');
+      spyOn(ion, 'setElementClass');
+
+      expect(ion.setElementClass).not.toHaveBeenCalled();
+      ion._setColor('icon', 'primary');
+
+      expect(hasClass(ion, 'icon-primary')).toEqual(true);
+    });
+
+  });
+
+  describe('mode', () => {
+
+    it('', () => {
+
+    });
+
+  });
+
+  var ion: Ion;
+
+  beforeEach(() => {
+    ion = new Ion(mockConfig(), mockElementRef(), mockRenderer());
+  });
+
+  function hasClass(ion: Ion, className: string) {
+    return ion._elementRef.nativeElement.classList.contains(className);
+  }
+
+});
diff --git a/src/components/app/test/storage/index.ts b/src/components/app/test/storage/app-module.ts
similarity index 71%
rename from src/components/app/test/storage/index.ts
rename to src/components/app/test/storage/app-module.ts
index 0b1ea2f458..b49a0f456b 100644
--- a/src/components/app/test/storage/index.ts
+++ b/src/components/app/test/storage/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, Storage, LocalStorage, SqlStorage } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Storage, LocalStorage, SqlStorage } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   local: Storage;
   sql: Storage;
 
@@ -49,4 +49,13 @@ class E2EApp {
   }
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}
diff --git a/src/components/app/test/typography/app-module.ts b/src/components/app/test/typography/app-module.ts
new file mode 100644
index 0000000000..889ca14aea
--- /dev/null
+++ b/src/components/app/test/typography/app-module.ts
@@ -0,0 +1,23 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, App } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EApp {
+  constructor(app: App) {
+    app.setTitle('Basic Buttons');
+  }
+}
+
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}
diff --git a/src/components/app/test/typography/main.html b/src/components/app/test/typography/main.html
new file mode 100644
index 0000000000..2a84763109
--- /dev/null
+++ b/src/components/app/test/typography/main.html
@@ -0,0 +1,40 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Typography</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+
+  <h2 primary>H2: The quick brown fox jumps over the lazy dog</h2>
+
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+
+  <h4 danger>H4: The quick brown fox jumps over the lazy dog</h4>
+
+  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+
+  <h6>H6: The quick brown fox jumps over the lazy dog</h6>
+
+  <p>
+    I saw a werewolf with a Chinese menu in his hand.
+    Walking through the <sub danger>streets</sub> of Soho in the rain.
+    He <i primary>was</i> looking for a place called Lee Ho Fook's.
+    Gonna get a <a secondary>big dish of beef chow mein.</a>
+  </p>
+
+  <p>
+    He's the hairy-handed gent who ran amuck in Kent.
+    Lately he's been overheard in Mayfair.
+    Better stay away from him.
+    He'll rip your lungs out, Jim.
+    I'd like to meet his tailor.
+    <ion-icon danger name="cut"></ion-icon>
+  </p>
+
+</ion-content>
\ No newline at end of file
diff --git a/src/components/badge/test/basic/app-module.ts b/src/components/badge/test/basic/app-module.ts
new file mode 100644
index 0000000000..4624b8ebc3
--- /dev/null
+++ b/src/components/badge/test/basic/app-module.ts
@@ -0,0 +1,62 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Config } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  dynamicColor = 'primary';
+  dynamicMode: string;
+
+  constructor(config: Config) {
+    this.dynamicMode = config.get('mode');
+  }
+
+  toggleColor() {
+    if (this.dynamicColor === 'primary') {
+      this.dynamicColor = 'secondary';
+    } else if (this.dynamicColor === 'secondary') {
+      this.dynamicColor = 'danger';
+    } else {
+      this.dynamicColor = 'primary';
+    }
+  }
+
+  toggleMode() {
+    if (this.dynamicMode === 'ios') {
+      this.dynamicMode = 'md';
+    } else if (this.dynamicMode === 'md') {
+      this.dynamicMode = 'wp';
+    } else {
+      this.dynamicMode = 'ios';
+    }
+  }
+
+  toggleBoth() {
+    this.toggleColor();
+    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 {}
diff --git a/src/components/badge/test/basic/e2e.ts b/src/components/badge/test/basic/e2e.ts
index 94ed4bf5a5..1598470cd9 100644
--- a/src/components/badge/test/basic/e2e.ts
+++ b/src/components/badge/test/basic/e2e.ts
@@ -1,4 +1,4 @@
 
 it('should toggle color', function() {
   element(by.css('.e2eBadgeToggleColor')).click();
-});
\ No newline at end of file
+});
diff --git a/src/components/badge/test/basic/index.ts b/src/components/badge/test/basic/index.ts
deleted file mode 100644
index 50abaadae3..0000000000
--- a/src/components/badge/test/basic/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  dynamicColor: string = 'secondary';
-
-  toggleColor() {
-    this.dynamicColor = (this.dynamicColor == 'secondary' ? 'danger' : 'secondary');
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/badge/test/basic/main.html b/src/components/badge/test/basic/main.html
index 15e9d99c28..0fd56bbfb2 100644
--- a/src/components/badge/test/basic/main.html
+++ b/src/components/badge/test/basic/main.html
@@ -38,8 +38,16 @@
       <ion-badge item-right color="dark">99</ion-badge>
     </ion-item>
     <button ion-item (click)="toggleColor()" class="e2eBadgeToggleColor">
-      Dynamic Secondary Badge (Toggle)
-      <ion-badge item-right [color]="dynamicColor">99</ion-badge>
+      Dynamic Badge Color (Toggle)
+      <ion-badge item-right [color]="dynamicColor">{{dynamicColor}}</ion-badge>
+    </button>
+    <button ion-item (click)="toggleMode()">
+      Dynamic Badge Mode (Toggle)
+      <ion-badge item-right color="secondary" [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
+    </button>
+    <button ion-item (click)="toggleBoth()">
+      Dynamic Badge Both (Toggle)
+      <ion-badge item-right [color]="dynamicColor" [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
     </button>
   </ion-list>
 
@@ -72,8 +80,12 @@
       <ion-badge item-left color="dark">99</ion-badge>
     </ion-item>
     <button ion-item (click)="toggleColor()">
-      Dynamic Secondary Badge (Toggle)
-      <ion-badge item-left [color]="dynamicColor">99</ion-badge>
+      Dynamic Badge Color (Toggle)
+      <ion-badge item-left [color]="dynamicColor">{{dynamicColor}}</ion-badge>
+    </button>
+    <button ion-item (click)="toggleMode()">
+      Dynamic Badge Mode (Toggle)
+      <ion-badge item-left [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
     </button>
   </ion-list>
 
diff --git a/src/components/button/test/attributes/index.ts b/src/components/button/test/attributes/app-module.ts
similarity index 75%
rename from src/components/button/test/attributes/index.ts
rename to src/components/button/test/attributes/app-module.ts
index b5f895acfc..c6c770065d 100644
--- a/src/components/button/test/attributes/index.ts
+++ b/src/components/button/test/attributes/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { App, ionicBootstrap } from '../../../../../src';
+import { NgModule, Component } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   isFull: boolean = true;
   isBlock: boolean = true;
   isBarClear: boolean = true;
@@ -20,10 +20,6 @@ class E2EPage {
   isDanger: string = 'danger';
   isDark: string = 'dark';
 
-  constructor(app: App) {
-
-  }
-
   toggleBlock() {
     this.isFull = !this.isFull;
     this.isBlock = !this.isBlock;
@@ -50,15 +46,28 @@ class E2EPage {
   removeColors() {
     this.isSecondary = null;
     this.isDanger = null;
-    this.isDark = null;  
+    this.isDark = null;
   }
 }
 
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/button/test/basic/index.ts b/src/components/button/test/basic/app-module.ts
similarity index 62%
rename from src/components/button/test/basic/index.ts
rename to src/components/button/test/basic/app-module.ts
index 1c5833fa99..bd7e2c8fe3 100644
--- a/src/components/button/test/basic/index.ts
+++ b/src/components/button/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { App, ionicBootstrap } from '../../../../../src';
+import { NgModule, Component } from '@angular/core';
+import { IonicApp, IonicModule, App } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   btnColor: string;
   testingColors = ['primary', 'secondary', 'danger', 'dark'];
   testingColorIndex = 0;
@@ -25,8 +25,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/button/test/block/app-module.ts b/src/components/button/test/block/app-module.ts
new file mode 100644
index 0000000000..c2c5e1381a
--- /dev/null
+++ b/src/components/button/test/block/app-module.ts
@@ -0,0 +1,38 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@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 {}
diff --git a/src/components/button/test/block/index.ts b/src/components/button/test/block/index.ts
deleted file mode 100644
index 11f64b96a5..0000000000
--- a/src/components/button/test/block/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  blockButton = true;
-
-  toggleBlock() {
-    this.blockButton = !this.blockButton;
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/button.spec.ts b/src/components/button/test/button.spec.ts
index 9d70241ef7..b843336878 100644
--- a/src/components/button/test/button.spec.ts
+++ b/src/components/button/test/button.spec.ts
@@ -1,261 +1,251 @@
-import { Button, Config } from '../../../../src';
+import { Button } from '../button';
+import { Config } from '../../../config/config';
+import { mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers';
 
 
-export function run() {
+describe('button', () => {
 
-  describe('button', () => {
+  it('should set a different button role', () => {
+    let b = mockButton();
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b.color = 'primary';
+    b.setRole('bar-button');
+    b._assignCss(true);
 
-    it('should set a different button role', () => {
-      let b = mockButton();
-      b.outline = true;
-      b.small = true;
-      b.full = true;
-      b.color = 'primary';
-      b.setRole('bar-button');
-      b._assignCss(true);
-
-      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
-      expect(hasClass(b, 'bar-button-small')).toEqual(true);
-      expect(hasClass(b, 'bar-button-full')).toEqual(true);
-      expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);
-
-      expect(hasClass(b, 'button-outline')).toEqual(false);
-      expect(hasClass(b, 'button-small')).toEqual(false);
-      expect(hasClass(b, 'button-full')).toEqual(false);
-      expect(hasClass(b, 'button-primary')).toEqual(false);
-    });
-
-    it('should remove button color attributes and add different role', () => {
-      let b = mockButton();
-      b.outline = true;
-      b.small = true;
-      b.full = true;
-      b.color = 'primary';
-
-      b._assignCss(true);
-      expect(hasClass(b, 'button-outline')).toEqual(true);
-      expect(hasClass(b, 'button-small')).toEqual(true);
-      expect(hasClass(b, 'button-full')).toEqual(true);
-      expect(hasClass(b, 'button-outline-primary')).toEqual(true);
-
-      b._assignCss(false);
-      expect(hasClass(b, 'button-outline')).toEqual(false);
-      expect(hasClass(b, 'button-small')).toEqual(false);
-      expect(hasClass(b, 'button-full')).toEqual(false);
-      expect(hasClass(b, 'button-outline-primary')).toEqual(false);
-    });
-
-    it('should read button color attributes with styles', () => {
-      let b = mockButton();
-      b.outline = true;
-      b.small = true;
-      b.full = true;
-      b.color = 'primary';
-
-      b._assignCss(true);
-      expect(hasClass(b, 'button')).toEqual(true);
-      expect(hasClass(b, 'button-outline')).toEqual(true);
-      expect(hasClass(b, 'button-small')).toEqual(true);
-      expect(hasClass(b, 'button-full')).toEqual(true);
-      expect(hasClass(b, 'button-outline-primary')).toEqual(true);
-
-      b = mockButton();
-      b.clear = true;
-      b.color = 'primary';
-      b.color = 'secondary';
-
-      b._assignCss(true);
-      expect(hasClass(b, 'button')).toEqual(true);
-      expect(hasClass(b, 'button-clear')).toEqual(true);
-      expect(hasClass(b, 'button-clear-primary')).toEqual(false);
-      expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
-
-      b = mockButton();
-      b.solid = true;
-      b.color = 'primary';
-      b.color = 'secondary';
-
-      b._assignCss(true);
-      expect(hasClass(b, 'button')).toEqual(true);
-      expect(hasClass(b, 'button-solid')).toEqual(true);
-      expect(hasClass(b, 'button-primary')).toEqual(false);
-      expect(hasClass(b, 'button-secondary')).toEqual(true);
-
-      b = mockButton();
-      b.solid = true;
-      b.color = 'primary';
-      b.color = 'secondary';
-
-      b.setRole('bar-button');
-      b._assignCss(true);
-      expect(hasClass(b, 'bar-button-solid')).toEqual(true);
-      expect(hasClass(b, 'bar-button-solid-primary')).toEqual(false);
-      expect(hasClass(b, 'bar-button-solid-secondary')).toEqual(true);
-    });
-
-    it('should auto add the default style', () => {
-      let b = mockButton();
-      b._assignCss(true);
-      expect(hasClass(b, 'button')).toEqual(true);
-      expect(hasClass(b, 'button-default')).toEqual(true);
-
-      b = mockButton();
-      b.clear = true;
-
-      b._assignCss(true);
-      expect(hasClass(b, 'button')).toEqual(true);
-      expect(hasClass(b, 'button-default')).toEqual(false);
-      expect(hasClass(b, 'button-clear')).toEqual(true);
-    });
-
-    it('should read button color attributes', () => {
-      let b = mockButton();
-      b.color = 'primary';
-      b._assignCss(true);
-      expect(hasClass(b, 'button-primary')).toEqual(true);
-
-      b = mockButton();
-      b.color = 'primary';
-      b.color = 'secondary';
-      b._assignCss(true);
-      expect(hasClass(b, 'button-primary')).toEqual(false);
-      expect(hasClass(b, 'button-secondary')).toEqual(true);
-    });
-
-    it('should read button style attributes', () => {
-      let b = mockButton();
-      b.clear = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-clear')).toEqual(true);
-
-      b = mockButton();
-      b.outline = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-outline')).toEqual(true);
-
-      b = mockButton();
-      b.solid = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-solid')).toEqual(true);
-
-      b = mockButton();
-      b.clear = true;
-      b.outline = true;
-      b.small = true;
-      b.full = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-clear')).toEqual(false);
-      expect(hasClass(b, 'button-outline')).toEqual(true);
-      expect(hasClass(b, 'button-small')).toEqual(true);
-      expect(hasClass(b, 'button-full')).toEqual(true);
-
-      b = mockButton();
-      b.outline = true;
-      b.setRole('bar-button');
-      b._assignCss(true);
-      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
-    });
-
-    it('should read button shape attributes', () => {
-      let b = mockButton();
-      b.round = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-round')).toEqual(true);
-
-      b = mockButton();
-      b.fab = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-fab')).toEqual(true);
-    });
-
-    it('should read button display attributes', () => {
-      let b = mockButton();
-      b.block = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-block')).toEqual(true);
-
-      b = mockButton();
-      b.full = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-full')).toEqual(true);
-
-      b = mockButton();
-      b.block = true;
-      b.full = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-block')).toEqual(false);
-      expect(hasClass(b, 'button-full')).toEqual(true);
-    });
-
-    it('should read button size attributes', () => {
-      let b = mockButton();
-      b.small = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-small')).toEqual(true);
-
-      b = mockButton();
-      b.large = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-large')).toEqual(true);
-
-      b = mockButton();
-      b.large = true;
-      b.small = true;
-      b._assignCss(true);
-      expect(hasClass(b, 'button-large')).toEqual(false);
-      expect(hasClass(b, 'button-small')).toEqual(true);
-    });
-
-    it('should add button css class', () => {
-      let b = mockButton();
-      b._assignCss(true);
-      expect(hasClass(b, 'button')).toEqual(true);
-    });
-
-    it('should add disable-hover css class', () => {
-      let config = new Config({
-        hoverCSS: false
-      });
-      let b = mockButton(config);
-
-      expect(hasClass(b, 'disable-hover')).toEqual(true);
-    });
-
-    it('should set defaults', () => {
-      let b = mockButton();
-      expect(b._role).toEqual('button');
-      expect(b._size).toEqual(null);
-      expect(b._color).toEqual(null);
-      expect(b._style).toEqual('default');
-      expect(b._display).toEqual(null);
-    });
-
-    it('should add alert-button css class', () => {
-      let b = mockButton(null, 'alert-button');
-      b._assignCss(true);
-      expect(hasClass(b, 'alert-button')).toEqual(true);
-    });
+    expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+    expect(hasClass(b, 'bar-button-small')).toEqual(true);
+    expect(hasClass(b, 'bar-button-full')).toEqual(true);
+    expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);
 
+    expect(hasClass(b, 'button-outline')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(false);
+    expect(hasClass(b, 'button-primary')).toEqual(false);
   });
 
-  function mockButton(config?, ionButton?) {
-    config = config || new Config();
-    ionButton = ionButton || '';
-    let elementRef = {
-      nativeElement: document.createElement('button')
-    };
-    let renderer: any = {
-      setElementClass: function(nativeElement, className, shouldAdd) {
-        nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
-      }
-    };
-    let b = new Button(null, ionButton, config, elementRef, renderer);
-    b._init = true;
-    return b;
-  }
+  it('should remove button color attributes and add different role', () => {
+    let b = mockButton();
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b.color = 'primary';
 
-  function hasClass(button, className) {
-    return button._elementRef.nativeElement.classList.contains(className);
-  }
+    b._assignCss(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(true);
 
+    b._assignCss(false);
+    expect(hasClass(b, 'button-outline')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(false);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(false);
+  });
+
+  it('should read button color attributes with styles', () => {
+    let b = mockButton();
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b.color = 'primary';
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(true);
+
+    b = mockButton();
+    b.clear = true;
+    b.color = 'primary';
+    b.color = 'secondary';
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+    expect(hasClass(b, 'button-clear-primary')).toEqual(false);
+    expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
+
+    b = mockButton();
+    b.solid = true;
+    b.color = 'primary';
+    b.color = 'secondary';
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-solid')).toEqual(true);
+    expect(hasClass(b, 'button-primary')).toEqual(false);
+    expect(hasClass(b, 'button-secondary')).toEqual(true);
+
+    b = mockButton();
+    b.solid = true;
+    b.color = 'primary';
+    b.color = 'secondary';
+
+    b.setRole('bar-button');
+    b._assignCss(true);
+    expect(hasClass(b, 'bar-button-solid')).toEqual(true);
+    expect(hasClass(b, 'bar-button-solid-primary')).toEqual(false);
+    expect(hasClass(b, 'bar-button-solid-secondary')).toEqual(true);
+  });
+
+  it('should auto add the default style', () => {
+    let b = mockButton();
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-default')).toEqual(true);
+
+    b = mockButton();
+    b.clear = true;
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-default')).toEqual(false);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+  });
+
+  it('should read button color attributes', () => {
+    let b = mockButton();
+    b.color = 'primary';
+    b._assignCss(true);
+    expect(hasClass(b, 'button-primary')).toEqual(true);
+
+    b = mockButton();
+    b.color = 'primary';
+    b.color = 'secondary';
+    b._assignCss(true);
+    expect(hasClass(b, 'button-primary')).toEqual(false);
+    expect(hasClass(b, 'button-secondary')).toEqual(true);
+  });
+
+  it('should read button style attributes', () => {
+    let b = mockButton();
+    b.clear = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+
+    b = mockButton();
+    b.outline = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+
+    b = mockButton();
+    b.solid = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-solid')).toEqual(true);
+
+    b = mockButton();
+    b.clear = true;
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-clear')).toEqual(false);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+
+    b = mockButton();
+    b.outline = true;
+    b.setRole('bar-button');
+    b._assignCss(true);
+    expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+  });
+
+  it('should read button shape attributes', () => {
+    let b = mockButton();
+    b.round = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-round')).toEqual(true);
+
+    b = mockButton();
+    b.fab = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-fab')).toEqual(true);
+  });
+
+  it('should read button display attributes', () => {
+    let b = mockButton();
+    b.block = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-block')).toEqual(true);
+
+    b = mockButton();
+    b.full = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+
+    b = mockButton();
+    b.block = true;
+    b.full = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-block')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+  });
+
+  it('should read button size attributes', () => {
+    let b = mockButton();
+    b.small = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+
+    b = mockButton();
+    b.large = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-large')).toEqual(true);
+
+    b = mockButton();
+    b.large = true;
+    b.small = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-large')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+  });
+
+  it('should add button css class', () => {
+    let b = mockButton();
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+  });
+
+  it('should add disable-hover css class', () => {
+    let config = mockConfig({
+      hoverCSS: false
+    });
+    let b = mockButton(config);
+
+    expect(hasClass(b, 'disable-hover')).toEqual(true);
+  });
+
+  it('should set defaults', () => {
+    let b = mockButton();
+    expect(b._role).toEqual('button');
+    expect(b._size).toEqual(undefined);
+    expect(b._color).toEqual(undefined);
+    expect(b._style).toEqual('default');
+    expect(b._display).toEqual(undefined);
+  });
+
+  it('should add alert-button css class', () => {
+    let b = mockButton(null, 'alert-button');
+    b._assignCss(true);
+    expect(hasClass(b, 'alert-button')).toEqual(true);
+  });
+
+});
+
+function mockButton(config?: Config, ionButton?: string) {
+  config = config || mockConfig();
+  ionButton = ionButton || '';
+  let b = new Button(null, ionButton, config, mockElementRef(), mockRenderer());
+  b._init = true;
+  return b;
+}
+
+function hasClass(button, className) {
+  return button._elementRef.nativeElement.classList.contains(className);
 }
diff --git a/src/components/button/test/clear/app-module.ts b/src/components/button/test/clear/app-module.ts
new file mode 100644
index 0000000000..174a81eacc
--- /dev/null
+++ b/src/components/button/test/clear/app-module.ts
@@ -0,0 +1,36 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@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 {}
diff --git a/src/components/button/test/clear/index.ts b/src/components/button/test/clear/index.ts
deleted file mode 100644
index 4817194989..0000000000
--- a/src/components/button/test/clear/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  clearButton = true;
-
-  toggleClear() {
-    this.clearButton = !this.clearButton;
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/dynamic/index.ts b/src/components/button/test/dynamic/app-module.ts
similarity index 74%
rename from src/components/button/test/dynamic/index.ts
rename to src/components/button/test/dynamic/app-module.ts
index 0a3df894a2..b4dfa95aba 100644
--- a/src/components/button/test/dynamic/index.ts
+++ b/src/components/button/test/dynamic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   isDestructive: boolean;
   isSecondary: boolean;
   isCustom: boolean;
@@ -54,8 +54,21 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/button/test/fab/app-module.ts b/src/components/button/test/fab/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/button/test/fab/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/button/test/fab/index.ts b/src/components/button/test/fab/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/button/test/fab/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/full/app-module.ts b/src/components/button/test/full/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/button/test/full/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/button/test/full/index.ts b/src/components/button/test/full/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/button/test/full/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/icons/app-module.ts b/src/components/button/test/icons/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/button/test/icons/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/button/test/icons/index.ts b/src/components/button/test/icons/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/button/test/icons/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/outline/app-module.ts b/src/components/button/test/outline/app-module.ts
new file mode 100644
index 0000000000..027f18e682
--- /dev/null
+++ b/src/components/button/test/outline/app-module.ts
@@ -0,0 +1,36 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  outlineButton = true;
+
+  toggleOutline() {
+    this.outlineButton = !this.outlineButton;
+  }
+}
+
+@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 {}
diff --git a/src/components/button/test/outline/index.ts b/src/components/button/test/outline/index.ts
deleted file mode 100644
index 33b7ef6003..0000000000
--- a/src/components/button/test/outline/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  outlineButton = true;
-
-  toggleOutline() {
-    this.outlineButton = !this.outlineButton;
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/raised/app-module.ts b/src/components/button/test/raised/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/button/test/raised/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/button/test/raised/index.ts b/src/components/button/test/raised/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/button/test/raised/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/round/app-module.ts b/src/components/button/test/round/app-module.ts
new file mode 100644
index 0000000000..3990ca9a8a
--- /dev/null
+++ b/src/components/button/test/round/app-module.ts
@@ -0,0 +1,37 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  dynamicColor: string = 'secondary';
+
+  toggleColor() {
+    this.dynamicColor = (this.dynamicColor === 'secondary' ? 'danger' : 'secondary');
+  }
+}
+
+
+@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 {}
diff --git a/src/components/button/test/round/index.ts b/src/components/button/test/round/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/button/test/round/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/button/test/sizes/app-module.ts b/src/components/button/test/sizes/app-module.ts
new file mode 100644
index 0000000000..89068bf125
--- /dev/null
+++ b/src/components/button/test/sizes/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+
+@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 {}
diff --git a/src/components/button/test/sizes/index.ts b/src/components/button/test/sizes/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/button/test/sizes/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/card/test/advanced/app-module.ts b/src/components/card/test/advanced/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/card/test/advanced/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/card/test/advanced/index.ts b/src/components/card/test/advanced/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/card/test/advanced/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/card/test/basic/app-module.ts b/src/components/card/test/basic/app-module.ts
new file mode 100644
index 0000000000..0c7a8d2016
--- /dev/null
+++ b/src/components/card/test/basic/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
+
diff --git a/src/components/card/test/basic/index.ts b/src/components/card/test/basic/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/card/test/basic/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/card/test/images/app-module.ts b/src/components/card/test/images/app-module.ts
new file mode 100644
index 0000000000..0c7a8d2016
--- /dev/null
+++ b/src/components/card/test/images/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
+
diff --git a/src/components/card/test/images/index.ts b/src/components/card/test/images/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/card/test/images/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/card/test/list/app-module.ts b/src/components/card/test/list/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/card/test/list/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/card/test/list/index.ts b/src/components/card/test/list/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/card/test/list/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/card/test/map/app-module.ts b/src/components/card/test/map/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/card/test/map/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/card/test/map/index.ts b/src/components/card/test/map/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/card/test/map/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/card/test/social/app-module.ts b/src/components/card/test/social/app-module.ts
new file mode 100644
index 0000000000..0bf1cc361b
--- /dev/null
+++ b/src/components/card/test/social/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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 {}
diff --git a/src/components/card/test/social/index.ts b/src/components/card/test/social/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/card/test/social/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/checkbox/test/basic/index.ts b/src/components/checkbox/test/basic/app-module.ts
similarity index 61%
rename from src/components/checkbox/test/basic/index.ts
rename to src/components/checkbox/test/basic/app-module.ts
index 3aca511ad3..6db2907631 100644
--- a/src/components/checkbox/test/basic/index.ts
+++ b/src/components/checkbox/test/basic/app-module.ts
@@ -1,13 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { ionicBootstrap, Checkbox } from '../../../../../src';
+import { IonicApp, IonicModule, Checkbox } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
-  fruitsForm: FormGroup;
+export class E2EPage {
   grapeDisabled: boolean;
   grapeChecked: boolean;
   kiwiValue: boolean;
@@ -16,14 +15,19 @@ class E2EPage {
   formResults: string;
   dangerColor: string = 'danger';
 
-  constructor() {
-    this.fruitsForm = new FormGroup({
-      'appleCtrl': new FormControl(true),
-      'bananaCtrl': new FormControl(true),
-      'cherryCtrl': new FormControl(false),
-      'grapeCtrl': new FormControl(true)
-    });
+  appleCtrl = new FormControl(true);
+  bananaCtrl = new FormControl(true);
+  cherryCtrl = new FormControl(false);
+  grapeCtrl = new FormControl(true);
 
+  fruitsForm = new FormGroup({
+    'apple': this.appleCtrl,
+    'banana': this.bananaCtrl,
+    'cherry': this.cherryCtrl,
+    'grape': this.grapeCtrl
+  });
+
+  constructor() {
     this.grapeDisabled = true;
     this.grapeChecked = true;
     this.standAloneChecked = true;
@@ -57,8 +61,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
+
diff --git a/src/components/checkbox/test/basic/e2e.ts b/src/components/checkbox/test/basic/e2e.ts
index baf77566e1..bbf32ab57e 100644
--- a/src/components/checkbox/test/basic/e2e.ts
+++ b/src/components/checkbox/test/basic/e2e.ts
@@ -1,6 +1,6 @@
 
 it('should check apple, enable/check grape, submit form', function() {
-  element(by.css('[formControlName=appleCtrl]')).click();
+  element(by.css('[formControlName=apple]')).click();
   element(by.css('.e2eGrapeDisabled')).click();
   element(by.css('.e2eGrapeChecked')).click();
   element(by.css('.e2eSubmit')).click();
diff --git a/src/components/checkbox/test/basic/main.html b/src/components/checkbox/test/basic/main.html
index 6f19e34aac..5f403370ff 100644
--- a/src/components/checkbox/test/basic/main.html
+++ b/src/components/checkbox/test/basic/main.html
@@ -15,22 +15,22 @@
 
       <ion-item>
         <ion-label>Apple, formControlName</ion-label>
-        <ion-checkbox formControlName="appleCtrl"></ion-checkbox>
+        <ion-checkbox formControlName="apple"></ion-checkbox>
       </ion-item>
 
       <ion-item>
         <ion-label>Banana, formControlName</ion-label>
-        <ion-checkbox formControlName="bananaCtrl"></ion-checkbox>
+        <ion-checkbox formControlName="banana"></ion-checkbox>
       </ion-item>
 
       <ion-item>
         <ion-label>Cherry, formControlName, disabled</ion-label>
-        <ion-checkbox disabled="true" formControlName="cherryCtrl"></ion-checkbox>
+        <ion-checkbox disabled="true" formControlName="cherry"></ion-checkbox>
       </ion-item>
 
       <ion-item>
         <ion-label>Grape, formControlName, checked, disabled</ion-label>
-        <ion-checkbox [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grapeCtrl"></ion-checkbox>
+        <ion-checkbox [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grape"></ion-checkbox>
       </ion-item>
 
       <ion-item>
@@ -74,14 +74,14 @@
   </p>
 
   <p aria-hidden="true" padding>
-    <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
-    <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
-    <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
-    <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
-    <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
-    <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
-    <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
-    <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
+    <code>appleCtrl.dirty: {{appleCtrl.dirty}}</code><br>
+    <code>appleCtrl.value: {{appleCtrl.value}}</code><br>
+    <code>bananaCtrl.dirty: {{bananaCtrl.dirty}}</code><br>
+    <code>bananaCtrl.value: {{bananaCtrl.value}}</code><br>
+    <code>cherry.dirty: {{cherryCtrl.dirty}}</code><br>
+    <code>cherry.value: {{cherryCtrl.value}}</code><br>
+    <code>grape.dirty: {{grapeCtrl.dirty}}</code><br>
+    <code>grape.value: {{grapeCtrl.value}}</code><br>
     <code>kiwiValue: {{kiwiValue}}</code><br>
     <code>strawberryValue: {{strawberryValue}}</code><br>
   </p>
diff --git a/src/components/chip/test/basic/app-module.ts b/src/components/chip/test/basic/app-module.ts
new file mode 100644
index 0000000000..94d8cdd600
--- /dev/null
+++ b/src/components/chip/test/basic/app-module.ts
@@ -0,0 +1,34 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  delete(chip: Element) {
+    chip.remove();
+  }
+}
+
+@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 {}
diff --git a/src/components/tabs/test/child-navs/e2e.ts b/src/components/chip/test/basic/e2e.ts
similarity index 100%
rename from src/components/tabs/test/child-navs/e2e.ts
rename to src/components/chip/test/basic/e2e.ts
diff --git a/src/components/chip/test/basic/index.ts b/src/components/chip/test/basic/index.ts
deleted file mode 100644
index a8201efd55..0000000000
--- a/src/components/chip/test/basic/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  delete(chip: Element) {
-    chip.remove();
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/content/test/basic/index.ts b/src/components/content/test/basic/app-module.ts
similarity index 54%
rename from src/components/content/test/basic/index.ts
rename to src/components/content/test/basic/app-module.ts
index 1686469c15..f3b204d749 100644
--- a/src/components/content/test/basic/index.ts
+++ b/src/components/content/test/basic/app-module.ts
@@ -1,11 +1,10 @@
-import { Component, ViewChild } from '@angular/core';
-import { Content, ionicBootstrap } from '../../../../../src';
-
+import { Component, NgModule, ViewChild } from '@angular/core';
+import { IonicApp, IonicModule, Content } from '../../../..';
 
 @Component({
   templateUrl: 'tabs.html'
 })
-class TabsPage {
+export class TabsPage {
   main = E2EPage;
   page1 = Page1;
   page2 = Page2;
@@ -17,7 +16,7 @@ class TabsPage {
 @Component({
   templateUrl: 'page4.html'
 })
-class Page4 {
+export class Page4 {
   tabsPage = TabsPage;
 }
 
@@ -25,7 +24,7 @@ class Page4 {
 @Component({
   templateUrl: 'page3.html'
 })
-class Page3 {
+export class Page3 {
   page4 = Page4;
 }
 
@@ -33,7 +32,7 @@ class Page3 {
 @Component({
   templateUrl: 'page2.html'
 })
-class Page2 {
+export class Page2 {
   page3 = Page3;
 }
 
@@ -41,7 +40,7 @@ class Page2 {
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
   page2 = Page2;
 }
 
@@ -49,7 +48,7 @@ class Page1 {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   @ViewChild(Content) content: Content;
   page1 = Page1;
   showToolbar: boolean = false;
@@ -64,8 +63,32 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    TabsPage,
+    Page1,
+    Page2,
+    Page3,
+    Page4
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    TabsPage,
+    Page1,
+    Page2,
+    Page3,
+    Page4
+  ]
+})
+export class AppModule {}
diff --git a/src/components/content/test/fullscreen/app-module.ts b/src/components/content/test/fullscreen/app-module.ts
new file mode 100644
index 0000000000..5e1671d1b8
--- /dev/null
+++ b/src/components/content/test/fullscreen/app-module.ts
@@ -0,0 +1,88 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'tabs.html'
+})
+export class TabsPage {
+  main = E2EPage;
+  page1 = Page1;
+  page2 = Page2;
+  page3 = Page3;
+  page4 = Page4;
+}
+
+
+@Component({
+  templateUrl: 'page4.html'
+})
+export class Page4 {
+  tabsPage = TabsPage;
+}
+
+
+@Component({
+  templateUrl: 'page3.html'
+})
+export class Page3 {
+  page4 = Page4;
+}
+
+
+@Component({
+  templateUrl: 'page2.html'
+})
+export class Page2 {
+  page3 = Page3;
+}
+
+
+@Component({
+  templateUrl: 'page1.html'
+})
+export class Page1 {
+  page2 = Page2;
+}
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  page1 = Page1;
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    TabsPage,
+    Page1,
+    Page2,
+    Page3,
+    Page4
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    TabsPage,
+    Page1,
+    Page2,
+    Page3,
+    Page4
+  ]
+})
+export class AppModule {}
diff --git a/src/components/content/test/fullscreen/index.ts b/src/components/content/test/fullscreen/index.ts
deleted file mode 100644
index e6becc4968..0000000000
--- a/src/components/content/test/fullscreen/index.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'tabs.html'
-})
-class TabsPage {
-  main = E2EPage;
-  page1 = Page1;
-  page2 = Page2;
-  page3 = Page3;
-  page4 = Page4;
-}
-
-
-@Component({
-  templateUrl: 'page4.html'
-})
-class Page4 {
-  tabsPage = TabsPage;
-}
-
-
-@Component({
-  templateUrl: 'page3.html'
-})
-class Page3 {
-  page4 = Page4;
-}
-
-
-@Component({
-  templateUrl: 'page2.html'
-})
-class Page2 {
-  page3 = Page3;
-}
-
-
-@Component({
-  templateUrl: 'page1.html'
-})
-class Page1 {
-  page2 = Page2;
-}
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  page1 = Page1;
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/datetime/test/basic/index.ts b/src/components/datetime/test/basic/app-module.ts
similarity index 71%
rename from src/components/datetime/test/basic/index.ts
rename to src/components/datetime/test/basic/app-module.ts
index 0e4cda566d..ed294d8c2a 100644
--- a/src/components/datetime/test/basic/index.ts
+++ b/src/components/datetime/test/basic/app-module.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   myDate: any;
   wwwInvented = '1989';
   time = '13:47:00';
@@ -51,8 +52,21 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/datetime/test/basic/e2e.ts b/src/components/datetime/test/basic/e2e.ts
index d572f477d2..62a3507105 100644
--- a/src/components/datetime/test/basic/e2e.ts
+++ b/src/components/datetime/test/basic/e2e.ts
@@ -4,5 +4,5 @@ it('should open basic datetime picker', function() {
 });
 
 it('should close with Done button click', function() {
-  element(by.css('.picker-button:last-child')).click();
+  element(by.css('.picker-toolbar-button:last-child .button')).click();
 });
diff --git a/src/components/datetime/test/datetime.spec.ts b/src/components/datetime/test/datetime.spec.ts
index 85650bf438..696adaef73 100644
--- a/src/components/datetime/test/datetime.spec.ts
+++ b/src/components/datetime/test/datetime.spec.ts
@@ -1,7 +1,10 @@
-import { DateTime, Form, Picker, Config, NavController } from '../../../../src';
-import * as datetime from '../../../../src/util/datetime-util';
 
-export function run() {
+import { DateTime } from '../datetime';
+import { Form } from '../../../util/form';
+import { Picker, PickerController } from '../../picker/picker';
+import * as datetime from '../../../util/datetime-util';
+import { mockApp, mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers';
+
 
 describe('DateTime', () => {
 
@@ -11,7 +14,7 @@ describe('DateTime', () => {
       datetime.max = '2001-12-15';
       datetime.min = '2000-01-15';
       datetime.pickerFormat = 'MM DD YYYY';
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
 
       var columns = picker.getColumns();
@@ -41,7 +44,7 @@ describe('DateTime', () => {
       datetime.max = '2010-11-15';
       datetime.min = '2000-02-15';
       datetime.pickerFormat = 'MM DD YYYY';
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
 
       var columns = picker.getColumns();
@@ -69,7 +72,7 @@ describe('DateTime', () => {
       datetime.min = '2000-01-01';
       datetime.pickerFormat = 'MM DD YYYY';
 
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
 
       var columns = picker.getColumns();
@@ -112,7 +115,7 @@ describe('DateTime', () => {
       datetime.pickerFormat = 'MMM YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
       var columns = picker.getColumns();
 
@@ -128,7 +131,7 @@ describe('DateTime', () => {
       datetime.pickerFormat = 'MMMM YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
       var columns = picker.getColumns();
 
@@ -142,7 +145,7 @@ describe('DateTime', () => {
       datetime.pickerFormat = 'DDDD D M YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
       var columns = picker.getColumns();
 
@@ -156,7 +159,7 @@ describe('DateTime', () => {
       datetime.pickerFormat = 'DDDD M YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
       var columns = picker.getColumns();
 
@@ -171,7 +174,7 @@ describe('DateTime', () => {
       datetime.min = '2000-01-01';
       datetime.pickerFormat = 'MM DD YYYY';
 
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
       var columns = picker.getColumns();
 
@@ -194,7 +197,7 @@ describe('DateTime', () => {
       datetime.min = '2000-01-01';
       datetime.pickerFormat = 'YYYY';
 
-      var picker = new Picker();
+      var picker = new Picker(mockApp());
       datetime.generate(picker);
       var columns = picker.getColumns();
 
@@ -472,7 +475,7 @@ describe('DateTime', () => {
   var datetime: DateTime;
 
   beforeEach(() => {
-    datetime = new DateTime(new Form(), new Config(), null, <NavController>{});
+    datetime = new DateTime(new Form(), mockConfig(), mockElementRef(), mockRenderer(), null, <PickerController>{});
   });
 
   console.warn = function(){};
@@ -528,5 +531,3 @@ describe('DateTime', () => {
   };
 
 });
-
-}
diff --git a/src/components/datetime/test/labels/app-module.ts b/src/components/datetime/test/labels/app-module.ts
new file mode 100644
index 0000000000..02f511a4ec
--- /dev/null
+++ b/src/components/datetime/test/labels/app-module.ts
@@ -0,0 +1,41 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  stacked1 = '1994-12-15T13:47:20.789';
+  stacked2 = '1994-12-15T13:47:20.789';
+  floating1 = '1995-04-15';
+  floating2 = '1995-04-15';
+  fixed1 = '2002-09-23T15:03:46.789';
+  fixed2 = '2002-09-23T15:03:46.789';
+  inline1 = '2005-06-17T11:06Z';
+  inline2 = '2005-06-17T11:06Z';
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/datetime/test/labels/index.ts b/src/components/datetime/test/labels/index.ts
deleted file mode 100644
index 2302fd981b..0000000000
--- a/src/components/datetime/test/labels/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  stacked2 = '1994-12-15T13:47:20.789';
-  floating2 = '1995-04-15';
-  fixed2 = '2002-09-23T15:03:46.789';
-  inline2 = '2005-06-17T11:06Z';
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/grid/test/alignment/app-module.ts b/src/components/grid/test/alignment/app-module.ts
new file mode 100644
index 0000000000..585d1e6adb
--- /dev/null
+++ b/src/components/grid/test/alignment/app-module.ts
@@ -0,0 +1,33 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/grid/test/alignment/index.ts b/src/components/grid/test/alignment/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/grid/test/alignment/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/grid/test/basic/app-module.ts b/src/components/grid/test/basic/app-module.ts
new file mode 100644
index 0000000000..0b1da1f6aa
--- /dev/null
+++ b/src/components/grid/test/basic/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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,
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/grid/test/basic/index.ts b/src/components/grid/test/basic/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/grid/test/basic/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/grid/test/full/app-module.ts b/src/components/grid/test/full/app-module.ts
new file mode 100644
index 0000000000..0b1da1f6aa
--- /dev/null
+++ b/src/components/grid/test/full/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@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,
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/grid/test/full/index.ts b/src/components/grid/test/full/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/grid/test/full/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/icon/test/basic/index.ts b/src/components/icon/test/basic/app-module.ts
similarity index 62%
rename from src/components/icon/test/basic/index.ts
rename to src/components/icon/test/basic/app-module.ts
index 5abd534d8b..def52a70a4 100644
--- a/src/components/icon/test/basic/index.ts
+++ b/src/components/icon/test/basic/app-module.ts
@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   homeIcon = 'home';
   isActive = false;
   iconIndex = 0;
@@ -35,8 +35,21 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/infinite-scroll/test/basic/index.ts b/src/components/infinite-scroll/test/basic/app-module.ts
similarity index 75%
rename from src/components/infinite-scroll/test/basic/index.ts
rename to src/components/infinite-scroll/test/basic/app-module.ts
index 6155dabbfa..03c4220ff9 100644
--- a/src/components/infinite-scroll/test/basic/index.ts
+++ b/src/components/infinite-scroll/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, InfiniteScroll, NavController } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, InfiniteScroll, NavController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage1 {
+export class E2EPage1 {
   @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
   items: number[] = [];
   enabled: boolean = true;
@@ -48,7 +48,7 @@ class E2EPage1 {
 @Component({
   template: '<ion-content><button ion-button (click)="navCtrl.pop()">Pop</button></ion-content>'
 })
-class E2EPage2 {
+export class E2EPage2 {
   constructor(public navCtrl: NavController) {}
 }
 
@@ -56,11 +56,27 @@ class E2EPage2 {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage1;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage1,
+    E2EPage2
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage1,
+    E2EPage2
+  ]
+})
+export class AppModule {}
 
 
 function getAsyncData(): Promise<any[]> {
diff --git a/src/components/infinite-scroll/test/infinite-scroll.spec.ts b/src/components/infinite-scroll/test/infinite-scroll.spec.ts
index 457c50ad06..8c4682d2a9 100644
--- a/src/components/infinite-scroll/test/infinite-scroll.spec.ts
+++ b/src/components/infinite-scroll/test/infinite-scroll.spec.ts
@@ -1,6 +1,7 @@
-import { InfiniteScroll, Content, Config } from '../../../../src';
+import { Content } from '../../content/content';
+import { InfiniteScroll } from '../infinite-scroll';
+import { mockConfig, mockElementRef, mockRenderer, mockZone } from '../../../util/mock-providers';
 
-export function run() {
 
 describe('Infinite Scroll', () => {
 
@@ -9,56 +10,57 @@ describe('Infinite Scroll', () => {
     it('should not set loading state when does not meet threshold', () => {
       setInfiniteScrollHeight(25);
       content.getContentDimensions = function() {
-        return { scrollHeight: 1000, scrollTop: 350, contentHeight: 500 };
+        return mockGetContentDimensions(1000, 350, 500);
       };
+
       inf.threshold = '100px';
 
       setInfiniteScrollTop(300);
 
-      var result = inf._onScroll(scrollEv());
+      var result = inf._onScroll();
       expect(result).toEqual(6);
     });
 
     it('should set loading state when meets threshold', () => {
       setInfiniteScrollHeight(25);
       content.getContentDimensions = function() {
-        return { scrollHeight: 1000, scrollTop: 500, contentHeight: 500 };
+        return mockGetContentDimensions(1000, 500, 500);
       };
       inf.threshold = '100px';
 
       setInfiniteScrollTop(300);
 
-      var result = inf._onScroll(scrollEv());
+      var result = inf._onScroll();
       expect(result).toEqual(5);
     });
 
     it('should not run if there is not infinite element height', () => {
       setInfiniteScrollTop(0);
-      var result = inf._onScroll(scrollEv());
+      var result = inf._onScroll();
       expect(result).toEqual(3);
     });
 
     it('should not run again if ran less than 32ms ago', () => {
       inf._lastCheck = Date.now();
-      var result = inf._onScroll(scrollEv());
+      var result = inf._onScroll();
       expect(result).toEqual(2);
     });
 
     it('should not run if state is disabled', () => {
       inf.state = 'disabled';
-      var result = inf._onScroll(scrollEv());
+      var result = inf._onScroll();
       expect(result).toEqual(1);
     });
 
     it('should not run if state is loading', () => {
       inf.state = 'loading';
-      var result = inf._onScroll(scrollEv());
+      var result = inf._onScroll();
       expect(result).toEqual(1);
     });
 
     it('should not run if not enabled', () => {
       inf.state = 'disabled';
-      var result = inf._onScroll(scrollEv());
+      var result = inf._onScroll();
       expect(result).toEqual(1);
     });
 
@@ -88,39 +90,22 @@ describe('Infinite Scroll', () => {
   });
 
 
-  let config = new Config();
+  let config = mockConfig();
   let inf: InfiniteScroll;
   let content: Content;
   let contentElementRef;
   let infiniteElementRef;
-  let zone = {
-    run: function(cb) {cb()},
-    runOutsideAngular: function(cb) {cb()}
-  };
 
   beforeEach(() => {
     contentElementRef = mockElementRef();
-    content = new Content(contentElementRef, config, null, null, null);
-    content.scrollElement = document.createElement('scroll-content');
+    content = new Content(config, contentElementRef, mockRenderer(), null, null, null, null, null);
+    content._scrollEle = document.createElement('div');
+    content._scrollEle.className = 'scroll-content';
 
     infiniteElementRef = mockElementRef();
-    inf = new InfiniteScroll(content, zone, infiniteElementRef);
+    inf = new InfiniteScroll(content, mockZone(), infiniteElementRef);
   });
 
-  function scrollEv() {
-    return {}
-  }
-
-  function mockElementRef() {
-    return {
-      nativeElement: {
-        classList: { add: function(){}, remove: function(){} },
-        scrollTop: 0,
-        hasAttribute: function(){}
-      }
-    }
-  }
-
   function setInfiniteScrollTop(scrollTop) {
     infiniteElementRef.nativeElement.scrollTop = scrollTop;
   }
@@ -129,10 +114,22 @@ describe('Infinite Scroll', () => {
     infiniteElementRef.nativeElement.scrollHeight = scrollHeight;
   }
 
-  function getScrollElementStyles() {
-    return content.scrollElement.style;
+  function mockGetContentDimensions(scrollHeight, scrollTop, contentHeight) {
+    return {
+          scrollHeight: scrollHeight,
+          scrollTop: scrollTop,
+          contentHeight: contentHeight,
+
+          contentTop: null,
+          contentBottom: null,
+          contentWidth: null,
+          contentLeft: null,
+          contentRight: null,
+          scrollBottom: null,
+          scrollWidth: null,
+          scrollLeft: null,
+          scrollRight: null
+        };
   }
 
 });
-
-}
diff --git a/src/components/infinite-scroll/test/short-list/index.ts b/src/components/infinite-scroll/test/short-list/app-module.ts
similarity index 72%
rename from src/components/infinite-scroll/test/short-list/index.ts
rename to src/components/infinite-scroll/test/short-list/app-module.ts
index 83a7e8a3bd..d1520e66a0 100644
--- a/src/components/infinite-scroll/test/short-list/index.ts
+++ b/src/components/infinite-scroll/test/short-list/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, InfiniteScroll } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, InfiniteScroll } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   items: number[] = [];
 
   constructor() {
@@ -36,11 +36,24 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
 
 function getAsyncData(): Promise<number[]> {
   // async return mock data
diff --git a/src/components/input/test/clear-input/app-module.ts b/src/components/input/test/clear-input/app-module.ts
new file mode 100644
index 0000000000..75ad236e29
--- /dev/null
+++ b/src/components/input/test/clear-input/app-module.ts
@@ -0,0 +1,36 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  myValue = 'value';
+
+  clicked() {
+    console.log('clicked button');
+  }
+}
+
+@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 {}
diff --git a/src/components/input/test/clear-input/index.ts b/src/components/input/test/clear-input/index.ts
deleted file mode 100644
index 30e90230e5..0000000000
--- a/src/components/input/test/clear-input/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  myValue = 'value';
-
-  clicked() {
-    console.log('clicked button');
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/input/test/fixed-inline-labels/app-module.ts b/src/components/input/test/fixed-inline-labels/app-module.ts
new file mode 100644
index 0000000000..cea93c0862
--- /dev/null
+++ b/src/components/input/test/fixed-inline-labels/app-module.ts
@@ -0,0 +1,37 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class PageOne {
+  url: string;
+  input1: string = 'Text 1';
+
+  onEvent(event: any) {
+    console.log('Did Event:', event.type);
+  }
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = PageOne;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    PageOne
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    PageOne
+  ]
+})
+export class AppModule {}
diff --git a/src/components/input/test/fixed-inline-labels/index.ts b/src/components/input/test/fixed-inline-labels/index.ts
deleted file mode 100644
index c85dfe5e09..0000000000
--- a/src/components/input/test/fixed-inline-labels/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class PageOne {
-  url: string;
-  input1: string = 'Text 1';
-
-  onEvent(event: any) {
-    console.log('Did Event:', event.type);
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = PageOne;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/input/test/floating-labels/app-module.ts b/src/components/input/test/floating-labels/app-module.ts
new file mode 100644
index 0000000000..6c4470b8da
--- /dev/null
+++ b/src/components/input/test/floating-labels/app-module.ts
@@ -0,0 +1,37 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  myParam = '';
+
+  myValues = {
+    value1: 'Dynamic Input',
+    value2: 'Dynamic Textarea'
+  };
+}
+
+@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 {}
diff --git a/src/components/input/test/floating-labels/index.ts b/src/components/input/test/floating-labels/index.ts
deleted file mode 100644
index f87a5e542a..0000000000
--- a/src/components/input/test/floating-labels/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  myParam = '';
-
-  myValues = {
-    value1: 'Dynamic Input',
-    value2: 'Dynamic Textarea'
-  };
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/input/test/form-inputs/index.ts b/src/components/input/test/form-inputs/app-module.ts
similarity index 71%
rename from src/components/input/test/form-inputs/index.ts
rename to src/components/input/test/form-inputs/app-module.ts
index 69b19ec985..0d6e7e6684 100644
--- a/src/components/input/test/form-inputs/index.ts
+++ b/src/components/input/test/form-inputs/app-module.ts
@@ -1,18 +1,21 @@
-import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/common';
-import { ionicBootstrap } from '../../../../../src';
+import { FormBuilder, Validators } from '@angular/forms';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   loginForm: any;
   userForm: any;
 
   login = {
     email: 'help@ionic.io',
-    username: 'admin'
+    username: 'admin',
+    password: '',
+    gender: '',
+    comments: ''
   };
 
   user = {
@@ -63,8 +66,21 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/input/test/highlight/index.ts b/src/components/input/test/highlight/app-module.ts
similarity index 66%
rename from src/components/input/test/highlight/index.ts
rename to src/components/input/test/highlight/app-module.ts
index 83c362040f..9b75b182d6 100644
--- a/src/components/input/test/highlight/index.ts
+++ b/src/components/input/test/highlight/app-module.ts
@@ -1,17 +1,20 @@
-import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/common';
-import { ionicBootstrap } from '../../../../../src';
+import { FormBuilder, Validators } from '@angular/forms';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   loginForm: any;
 
   login = {
     email: 'help@ionic.io',
     username: 'admin',
+    password: '',
+    comments: '',
+    inset: ''
   };
 
   submitted: boolean = false;
@@ -47,8 +50,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/input/test/inline-labels/app-module.ts b/src/components/input/test/inline-labels/app-module.ts
new file mode 100644
index 0000000000..9d80310226
--- /dev/null
+++ b/src/components/input/test/inline-labels/app-module.ts
@@ -0,0 +1,35 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+
+  submit(ev: any) {
+    console.debug('submit', ev);
+  }
+}
+
+@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 {}
diff --git a/src/components/input/test/inline-labels/index.ts b/src/components/input/test/inline-labels/index.ts
deleted file mode 100644
index 40d8dc5acf..0000000000
--- a/src/components/input/test/inline-labels/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-
-  submit(ev: any) {
-    console.debug('submit', ev);
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/input/test/input-focus/index.ts b/src/components/input/test/input-focus/app-module.ts
similarity index 76%
rename from src/components/input/test/input-focus/index.ts
rename to src/components/input/test/input-focus/app-module.ts
index ec023ce30d..fe46ea35dc 100644
--- a/src/components/input/test/input-focus/index.ts
+++ b/src/components/input/test/input-focus/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   reload() {
     window.location.reload();
   }
@@ -36,8 +36,21 @@ document.addEventListener('focusout', (ev: any) => {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/input/test/input-focus/main.html b/src/components/input/test/input-focus/main.html
index 8b792fab6b..6641f0ef83 100644
--- a/src/components/input/test/input-focus/main.html
+++ b/src/components/input/test/input-focus/main.html
@@ -33,7 +33,7 @@
       <ion-input value="value"></ion-input>
     </ion-item>
 
-    <button ion-button ion-item>
+    <button ion-item>
       Button Item
     </button>
 
diff --git a/src/components/input/test/inset-inputs/app-module.ts b/src/components/input/test/inset-inputs/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/input/test/inset-inputs/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/input/test/inset-inputs/index.ts b/src/components/input/test/inset-inputs/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/input/test/inset-inputs/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/input/test/placeholder-labels/app-module.ts b/src/components/input/test/placeholder-labels/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/input/test/placeholder-labels/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/input/test/placeholder-labels/index.ts b/src/components/input/test/placeholder-labels/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/input/test/placeholder-labels/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/input/test/stacked-labels/app-module.ts b/src/components/input/test/stacked-labels/app-module.ts
new file mode 100644
index 0000000000..c9deb48eaa
--- /dev/null
+++ b/src/components/input/test/stacked-labels/app-module.ts
@@ -0,0 +1,34 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class PageOne {
+  gender = '';
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = PageOne;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    PageOne
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    PageOne
+  ]
+})
+export class AppModule {}
diff --git a/src/components/input/test/stacked-labels/index.ts b/src/components/input/test/stacked-labels/index.ts
deleted file mode 100644
index d20d741341..0000000000
--- a/src/components/input/test/stacked-labels/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class PageOne {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = PageOne;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/input/test/text-input.spec.ts b/src/components/input/test/text-input.spec.ts
index 26df83d787..2f215f777c 100644
--- a/src/components/input/test/text-input.spec.ts
+++ b/src/components/input/test/text-input.spec.ts
@@ -1,7 +1,6 @@
-import { TextInput } from '../../../../src';
-
-export function run() {
+import { TextInput } from '../input';
 
+describe('input', () => {
   it('should scroll, top and bottom below safe area, no room to scroll', () => {
     let inputOffsetTop = 350;
     let inputOffsetHeight = 35;
@@ -131,5 +130,4 @@ export function run() {
     let scrollData = TextInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
     expect(scrollData.scrollAmount).toBe(0);
   });
-
-}
+});
diff --git a/src/components/item/test/buttons/app-module.ts b/src/components/item/test/buttons/app-module.ts
new file mode 100644
index 0000000000..1545f92257
--- /dev/null
+++ b/src/components/item/test/buttons/app-module.ts
@@ -0,0 +1,35 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  testClick(ev: any) {
+    console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
+  }
+}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/buttons/index.ts b/src/components/item/test/buttons/index.ts
deleted file mode 100644
index 9dc186d231..0000000000
--- a/src/components/item/test/buttons/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  testClick(ev: any) {
-    console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/item/test/dividers/app-module.ts b/src/components/item/test/dividers/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/item/test/dividers/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/dividers/index.ts b/src/components/item/test/dividers/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/item/test/dividers/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/item/test/groups/index.ts b/src/components/item/test/groups/app-module.ts
similarity index 98%
rename from src/components/item/test/groups/index.ts
rename to src/components/item/test/groups/app-module.ts
index 34b75a6387..0ac90d48ef 100644
--- a/src/components/item/test/groups/index.ts
+++ b/src/components/item/test/groups/app-module.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController, NavParams } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, NavController, NavParams } from '../../../..';
 
 
 @Component({
@@ -15,7 +15,7 @@ import { ionicBootstrap, NavController, NavParams } from '../../../../../src';
     </ion-content>
   `
 })
-class SessionDetail {
+export class SessionDetail {
   session: any;
 
   constructor(params: NavParams, public navCtrl: NavController) {
@@ -27,7 +27,7 @@ class SessionDetail {
 @Component({
   templateUrl: 'session-list.html'
 })
-class SessionList {
+export class SessionList {
   data = data;
 
   constructor(public navCtrl: NavController) {}
@@ -50,11 +50,27 @@ class SessionList {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = SessionList;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    SessionList,
+    SessionDetail
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    SessionList,
+    SessionDetail
+  ]
+})
+export class AppModule {}
 
 
 let data = [
diff --git a/src/components/item/test/icons/app-module.ts b/src/components/item/test/icons/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/item/test/icons/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/icons/index.ts b/src/components/item/test/icons/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/item/test/icons/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/item/test/images/app-module.ts b/src/components/item/test/images/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/item/test/images/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/images/index.ts b/src/components/item/test/images/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/item/test/images/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/item/test/media/app-module.ts b/src/components/item/test/media/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/item/test/media/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/media/index.ts b/src/components/item/test/media/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/item/test/media/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/item/test/reorder/index.ts b/src/components/item/test/reorder/app-module.ts
similarity index 54%
rename from src/components/item/test/reorder/index.ts
rename to src/components/item/test/reorder/app-module.ts
index 377911cceb..3ec6d8fdcd 100644
--- a/src/components/item/test/reorder/index.ts
+++ b/src/components/item/test/reorder/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
-import { ionicBootstrap, reorderArray } from '../../../../../src';
+import { Component, ChangeDetectorRef, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, reorderArray } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   items: any[] = [];
   isReordering: boolean = false;
 
@@ -29,8 +29,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/reorder/e2e.ts b/src/components/item/test/reorder/e2e.ts
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/item/test/reorder/e2e.ts
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/item/test/sliding/index.ts b/src/components/item/test/sliding/app-module.ts
similarity index 79%
rename from src/components/item/test/sliding/index.ts
rename to src/components/item/test/sliding/app-module.ts
index a2bff69548..8cb6de7b67 100644
--- a/src/components/item/test/sliding/index.ts
+++ b/src/components/item/test/sliding/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, AlertController, NavController, List, ItemSliding, ToastController } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, AlertController, NavController, List, ItemSliding, ToastController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   @ViewChild('myList', {read: List}) list: List;
 
   items: number[] = [];
@@ -87,14 +87,14 @@ class E2EPage {
   }
 
   download(item: ItemSliding) {
-    item.setCssClass('downloading', true);
+    item._setCssClass('downloading', true);
     setTimeout(() => {
       const toast = this.toastCtrl.create({
         message: 'Item was downloaded!'
       });
       toast.present();
 
-      item.setCssClass('downloading', false);
+      item._setCssClass('downloading', false);
       item.close();
       setTimeout(() => {
         toast.dismiss();
@@ -111,8 +111,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/sliding/main.html b/src/components/item/test/sliding/main.html
index 688eddc8a2..7e290e7294 100644
--- a/src/components/item/test/sliding/main.html
+++ b/src/components/item/test/sliding/main.html
@@ -198,7 +198,7 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding item9>
+    <ion-item-sliding #item9>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
diff --git a/src/components/item/test/text/app-module.ts b/src/components/item/test/text/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/item/test/text/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/text/index.ts b/src/components/item/test/text/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/item/test/text/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/list/test/header-scenarios/app-module.ts b/src/components/list/test/header-scenarios/app-module.ts
new file mode 100644
index 0000000000..c77c785bdd
--- /dev/null
+++ b/src/components/list/test/header-scenarios/app-module.ts
@@ -0,0 +1,36 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  testClick(ev: UIEvent) {
+    console.log(ev);
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/list/test/header-scenarios/index.ts b/src/components/list/test/header-scenarios/index.ts
deleted file mode 100644
index 5d6076a2b7..0000000000
--- a/src/components/list/test/header-scenarios/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  testClick(ev: UIEvent) {
-    console.log(ev);
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/list/test/header-scenarios/main.html b/src/components/list/test/header-scenarios/main.html
index d693488489..532c6d43b8 100644
--- a/src/components/list/test/header-scenarios/main.html
+++ b/src/components/list/test/header-scenarios/main.html
@@ -1,10 +1,14 @@
-<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar>
+<ion-header>
+  <ion-toolbar>
+    <ion-title>List Header Scenarios</ion-title>
+  </ion-toolbar>
+</ion-header>
 
 <ion-content class="outer-content">
   <ion-list>
-    <ion-list-header>
+    <!--<ion-list-header>
       ion-list-header
-    </ion-list-header>
+    </ion-list-header>-->
 
     <ion-list-header text-wrap>
       This is multiline text that has a
@@ -76,7 +80,7 @@
       </button>
     </ion-list-header>
 
-    <ion-list-header *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1">
+    <ion-list-header *ngFor="let data of [0,1,2,3,4]; let i = index">
       <ion-avatar item-left>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-avatar>
diff --git a/src/components/list/test/headers/app-module.ts b/src/components/list/test/headers/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/list/test/headers/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/list/test/headers/index.ts b/src/components/list/test/headers/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/list/test/headers/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/list/test/inset/app-module.ts b/src/components/list/test/inset/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/list/test/inset/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/list/test/inset/index.ts b/src/components/list/test/inset/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/list/test/inset/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/list/test/no-lines/app-module.ts b/src/components/list/test/no-lines/app-module.ts
new file mode 100644
index 0000000000..1286436e7c
--- /dev/null
+++ b/src/components/list/test/no-lines/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/list/test/no-lines/index.ts b/src/components/list/test/no-lines/index.ts
deleted file mode 100644
index 7b73dae881..0000000000
--- a/src/components/list/test/no-lines/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/list/test/repeat-headers/app-module.ts b/src/components/list/test/repeat-headers/app-module.ts
new file mode 100644
index 0000000000..25a84e2536
--- /dev/null
+++ b/src/components/list/test/repeat-headers/app-module.ts
@@ -0,0 +1,37 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  people = [
+    {'name': 'Burt', 'components': [ 'all the things']},
+    {'name': 'Mary', 'components': [ 'checkbox', 'content', 'form']},
+    {'name': 'Albert', 'components': [ 'tabs']}
+  ];
+}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/list/test/repeat-headers/index.ts b/src/components/list/test/repeat-headers/index.ts
deleted file mode 100644
index cf6f2df084..0000000000
--- a/src/components/list/test/repeat-headers/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  people = [
-    {'name': 'Burt', 'components': [ 'all the things']},
-    {'name': 'Mary', 'components': [ 'checkbox', 'content', 'form']},
-    {'name': 'Albert', 'components': [ 'tabs']}
-  ];
-}
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class E2EApp {
-  rootPage = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/list/test/sticky/index.ts b/src/components/list/test/sticky/app-module.ts
similarity index 59%
rename from src/components/list/test/sticky/index.ts
rename to src/components/list/test/sticky/app-module.ts
index 8d1fa7569e..ab8c90675c 100644
--- a/src/components/list/test/sticky/index.ts
+++ b/src/components/list/test/sticky/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   groups: any[] = [];
 
   constructor() {
@@ -31,8 +31,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/loading/test/basic/index.ts b/src/components/loading/test/basic/app-module.ts
similarity index 78%
rename from src/components/loading/test/basic/index.ts
rename to src/components/loading/test/basic/app-module.ts
index 3ce0109487..f05a10fd3e 100644
--- a/src/components/loading/test/basic/index.ts
+++ b/src/components/loading/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap, LoadingController, NavController } from '../../../../../src';
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, LoadingController, NavController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
 
   presentLoadingIos() {
@@ -88,7 +88,7 @@ class E2EPage {
 
     loading.present();
     setTimeout(() => {
-      loading.setContent("Loaded!");
+      loading.setContent('Loaded!');
     }, 1000);
     setTimeout(() => {
       loading.dismiss();
@@ -141,53 +141,32 @@ class E2EPage {
     setTimeout(() => {
       loading3.present();
 
-      setTimeout(() => {
-        loading3.dismiss();
-      }, 1000);
+      loading3.dismiss();
+      loading2.dismiss();
+      loading.dismiss();
 
-      setTimeout(() => {
-        loading2.dismiss();
-      }, 2000);
-
-      setTimeout(() => {
-        loading.dismiss();
-      }, 3000);
     }, 2000);
 
   }
 
   presentLoadingMultipleNav() {
-    let loading = this.loadingCtrl.create({
+    this.loadingCtrl.create({
       spinner: 'hide',
       content: 'Loading 1 Please Wait...',
       dismissOnPageChange: true
-    });
-
-    loading.present();
-
-    let loading2 = this.loadingCtrl.create({
-      spinner: 'hide',
-      content: 'Loading 2 Please Wait...',
-      dismissOnPageChange: true
-    });
+    }).present();
 
     setTimeout(() => {
-      loading2.present();
+
+      this.loadingCtrl.create({
+        spinner: 'hide',
+        content: 'Loading 2 Please Wait...',
+        dismissOnPageChange: true
+      }).present();
+
+      this.navCtrl.push(Page2);
+
     }, 500);
-
-    let loading3 = this.loadingCtrl.create({
-      spinner: 'hide',
-      content: 'Loading 3 Please Wait...',
-      dismissOnPageChange: true
-    });
-
-    setTimeout(() => {
-      loading3.present();
-
-      setTimeout(() => {
-        this.navCtrl.push(Page2);
-      }, 1000);
-    }, 1000);
   }
 }
 
@@ -211,10 +190,10 @@ class E2EPage {
     </ion-footer>
   `
 })
-class Page2 {
+export class Page2 {
   constructor(public navCtrl: NavController) {}
 
-  ionViewLoaded() {
+  ionViewDidLoad() {
     setTimeout(() => {
       this.navCtrl.push(Page3);
     }, 1000);
@@ -235,17 +214,34 @@ class Page2 {
     <ion-content padding>Some content</ion-content>
   `
 })
-class Page3 {}
+export class Page3 {}
 
 @Component({
   template: `
-    <link href="styles.css" rel="stylesheet">
     <ion-nav [root]="root"></ion-nav>
   `,
   encapsulation: ViewEncapsulation.None
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    Page2,
+    Page3
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    Page2,
+    Page3
+  ]
+})
+export class AppModule {}
diff --git a/src/components/loading/test/basic/main.html b/src/components/loading/test/basic/main.html
index 98cf0bb978..0e67e1549a 100644
--- a/src/components/loading/test/basic/main.html
+++ b/src/components/loading/test/basic/main.html
@@ -1,3 +1,5 @@
+<div class="e2e-loading">
+
 <ion-header>
 
   <ion-navbar>
@@ -35,3 +37,5 @@
   </ion-toolbar>
 
 </ion-footer>
+
+</div>
diff --git a/src/components/loading/test/basic/styles.css b/src/components/loading/test/basic/styles.css
deleted file mode 100644
index 93f3d0c388..0000000000
--- a/src/components/loading/test/basic/styles.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/* Fix the spinner used in e2e */
-.fixed-spinner svg {
-  animation: none;
-}
-
-.custom-spinner-container {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-}
-
-.custom-spinner-box {
-  position: relative;
-  box-sizing: border-box;
-  border: 4px solid #000;
-  width: 60px;
-  height: 60px;
-  animation: spin 3s infinite linear;
-}
-
-.custom-spinner-box:before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-  border: 4px solid #000;
-  width: 40px;
-  height: 40px;
-  animation: pulse 1.5s infinite ease;
-}
-
-.wp .custom-spinner-box,
-.wp .custom-spinner-box:before {
-  border-color: #fff;
-}
-
-@-webkit-keyframes pulse {
-  50% {
-    border-width: 20px;
-  }
-}
-@keyframes pulse {
-  50% {
-    border-width: 20px;
-  }
-}
-
-@-webkit-keyframes spin {
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
-}
-@keyframes spin {
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
-}
diff --git a/src/components/loading/test/tabs/index.ts b/src/components/loading/test/tabs/app-module.ts
similarity index 69%
rename from src/components/loading/test/tabs/index.ts
rename to src/components/loading/test/tabs/app-module.ts
index 6da24d853e..680bbf89d6 100644
--- a/src/components/loading/test/tabs/index.ts
+++ b/src/components/loading/test/tabs/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, LoadingController, NavController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, LoadingController, NavController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
 
   presentLoading() {
@@ -46,7 +46,7 @@ class E2EPage {
     <ion-content padding>Some content</ion-content>
   `
 })
-class Page2 {}
+export class Page2 {}
 
 @Component({
   template: `
@@ -58,16 +58,34 @@ class Page2 {}
   `
 })
 export class TabsPage {
-  private root1 = E2EPage;
-  private root2 = Page2;
-  private root3 = E2EPage;
+ root1 = E2EPage;
+ root2 = Page2;
+ root3 = E2EPage;
 }
 
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = TabsPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    TabsPage,
+    Page2
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    TabsPage,
+    Page2
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/basic/index.ts b/src/components/menu/test/basic/app-module.ts
similarity index 77%
rename from src/components/menu/test/basic/index.ts
rename to src/components/menu/test/basic/app-module.ts
index 3d80a790dc..f71fc9be59 100644
--- a/src/components/menu/test/basic/index.ts
+++ b/src/components/menu/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, MenuController, NavController, AlertController, Nav } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, MenuController, NavController, AlertController, Nav } from '../../../..';
 
 
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
   constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}
 
   presentAlert() {
@@ -25,11 +25,11 @@ class Page1 {
 
 
 @Component({templateUrl: 'page3.html'})
-class Page3 {}
+export class Page3 {}
 
 
 @Component({templateUrl: 'page2.html'})
-class Page2 {
+export class Page2 {
   constructor(public navCtrl: NavController) {}
 
   page3() {
@@ -41,7 +41,7 @@ class Page2 {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   rootPage: any;
   changeDetectionCount: number = 0;
   pages: Array<{title: string, component: any}>;
@@ -96,8 +96,28 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    Page1,
+    Page2,
+    Page3
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    Page1,
+    Page2,
+    Page3
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/basic/page1.html b/src/components/menu/test/basic/page1.html
index 9f14c9ad3e..c340af5241 100644
--- a/src/components/menu/test/basic/page1.html
+++ b/src/components/menu/test/basic/page1.html
@@ -68,6 +68,6 @@
     <button ion-button (click)="goToPage2()">Go to Page 2</button>
   </p>
 
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/menu/test/basic/page3.html b/src/components/menu/test/basic/page3.html
index 881f39bd0c..513b043e82 100644
--- a/src/components/menu/test/basic/page3.html
+++ b/src/components/menu/test/basic/page3.html
@@ -23,6 +23,6 @@
     <button ion-button menuToggle="right">Toggle Right Menu</button>
   </p>
 
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/menu/test/disable-swipe/index.ts b/src/components/menu/test/disable-swipe/app-module.ts
similarity index 60%
rename from src/components/menu/test/disable-swipe/index.ts
rename to src/components/menu/test/disable-swipe/app-module.ts
index b29524d87e..7fd8a225f0 100644
--- a/src/components/menu/test/disable-swipe/index.ts
+++ b/src/components/menu/test/disable-swipe/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController, MenuController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, MenuController } from '../../../..';
 
 
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
   leftMenuSwipeEnabled: boolean = true;
   rightMenuSwipeEnabled: boolean = false;
 
@@ -28,6 +28,22 @@ class Page1 {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   root = Page1;
 }
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/enable-disable/index.ts b/src/components/menu/test/enable-disable/app-module.ts
similarity index 66%
rename from src/components/menu/test/enable-disable/index.ts
rename to src/components/menu/test/enable-disable/app-module.ts
index c7ca761cc3..7233423ca4 100644
--- a/src/components/menu/test/enable-disable/index.ts
+++ b/src/components/menu/test/enable-disable/app-module.ts
@@ -1,24 +1,24 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, App, MenuController, Nav } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, App, MenuController, Nav } from '../../../..';
 
 
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
 }
 
 @Component({
   templateUrl: 'page2.html'
 })
-class Page2 {
+export class Page2 {
 }
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   @ViewChild(Nav) nav: Nav;
 
   activeMenu: string;
@@ -52,4 +52,20 @@ class E2EApp {
   }
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1,
+    Page2
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1,
+    Page2
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/menu.spec.ts b/src/components/menu/test/menu.spec.ts
index 13ac200acf..8538f1e638 100644
--- a/src/components/menu/test/menu.spec.ts
+++ b/src/components/menu/test/menu.spec.ts
@@ -1,250 +1,246 @@
-import { MenuController, Menu } from '../../../../src';
+import { MenuController } from '../menu-controller';
+import { mockMenu } from '../../../util/mock-providers';
 
-export function run() {
-  describe('MenuController', () => {
 
-    describe('get() without menuId', () => {
+describe('MenuController', () => {
 
-      it('should not get a menu if no menus', () => {
-        let menu = menuCtrl.get();
-        expect(menu).toEqual(null);
-      });
-
-      it('should get the only menu', () => {
-        let someMenu = mockMenu();
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get();
-        expect(menu).toEqual(someMenu);
-      });
-
-      it('should get the only menu if menuId === ""', () => {
-        let someMenu = mockMenu();
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get('');
-        expect(menu).toEqual(someMenu);
-      });
-
-      it('should get the enabled menu when multiple menus', () => {
-        let someMenu1 = mockMenu();
-        someMenu1.enabled = false;
-        menuCtrl.register(someMenu1);
-
-        let someMenu2 = mockMenu();
-        someMenu2.enabled = true;
-        menuCtrl.register(someMenu2);
-
-        let menu = menuCtrl.get();
-        expect(menu).toEqual(someMenu2);
-      });
+  describe('get() without menuId', () => {
 
+    it('should not get a menu if no menus', () => {
+      let menu = menuCtrl.get();
+      expect(menu).toEqual(null);
     });
 
-    describe('get() by id', () => {
-
-      it('should be null if no menus', () => {
-        let menu = menuCtrl.get('myid');
-        expect(menu).toEqual(null);
-      });
-
-      it('should be null if no matching menus with id', () => {
-        let someMenu = mockMenu();
-        someMenu.id = 'whatever';
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get('myMenu');
-        expect(menu).toEqual(null);
-      });
-
-      it('should get the menu by id with matching id', () => {
-        let someMenu = mockMenu();
-        someMenu.id = 'myMenu';
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get('myMenu');
-        expect(menu).toEqual(someMenu);
-      });
-
-      it('should get the menu by id with left', () => {
-        let someMenu = mockMenu();
-        someMenu.id = 'myMenu';
-        someMenu.side = 'left';
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get('myMenu');
-        expect(menu).toEqual(someMenu);
-      });
-
-      it('should get the menu by id with matching id when multiple menus', () => {
-        let someMenu1 = mockMenu();
-        someMenu1.id = 'myMenu1';
-        menuCtrl.register(someMenu1);
-
-        let someMenu2 = mockMenu();
-        someMenu2.id = 'myMenu2';
-        menuCtrl.register(someMenu2);
-
-        let menu = menuCtrl.get('myMenu1');
-        expect(menu).toEqual(someMenu1);
-
-        menu = menuCtrl.get('myMenu2');
-        expect(menu).toEqual(someMenu2);
-      });
+    it('should get the only menu', () => {
+      let someMenu = mockMenu();
+      menuCtrl.register(someMenu);
 
+      let menu = menuCtrl.get();
+      expect(menu).toEqual(someMenu);
     });
 
-    describe('get() by side', () => {
-
-      it('should not get a menu with a left side if no menus', () => {
-        let menu = menuCtrl.get('left');
-        expect(menu).toEqual(null);
-      });
-
-      it('should not get a menu with a right side if no menus', () => {
-        let menu = menuCtrl.get('right');
-        expect(menu).toEqual(null);
-      });
-
-      it('should get the only left menu', () => {
-        let someMenu = mockMenu();
-        someMenu.side = 'left';
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get('left');
-        expect(menu).toEqual(someMenu);
-      });
-
-      it('should get the enabled left menu', () => {
-        let someMenu1 = mockMenu();
-        someMenu1.side = 'left';
-        someMenu1.enabled = false;
-        menuCtrl.register(someMenu1);
-
-        let someMenu2 = mockMenu();
-        someMenu2.side = 'left';
-        someMenu2.enabled = true;
-        menuCtrl.register(someMenu2);
-
-        let menu = menuCtrl.get('left');
-        expect(menu).toEqual(someMenu2);
-      });
-
-      it('should get the first left menu when all are disabled', () => {
-        let someMenu1 = mockMenu();
-        someMenu1.side = 'left';
-        someMenu1.enabled = false;
-        menuCtrl.register(someMenu1);
-
-        let someMenu2 = mockMenu();
-        someMenu2.side = 'left';
-        someMenu2.enabled = false;
-        menuCtrl.register(someMenu2);
-
-        let menu = menuCtrl.get('left');
-        expect(menu).toEqual(someMenu1);
-      });
-
-      it('should get the only right menu', () => {
-        let someMenu = mockMenu();
-        someMenu.side = 'right';
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get('right');
-        expect(menu).toEqual(someMenu);
-      });
-
-      it('should get the menu by left with id', () => {
-        let someMenu = mockMenu();
-        someMenu.id = 'myMenu';
-        someMenu.side = 'left';
-        menuCtrl.register(someMenu);
-
-        let menu = menuCtrl.get('left');
-        expect(menu).toEqual(someMenu);
-      });
+    it('should get the only menu if menuId === ""', () => {
+      let someMenu = mockMenu();
+      menuCtrl.register(someMenu);
 
+      let menu = menuCtrl.get('');
+      expect(menu).toEqual(someMenu);
     });
 
-    describe('enable()', () => {
+    it('should get the enabled menu when multiple menus', () => {
+      let someMenu1 = mockMenu();
+      someMenu1.enabled = false;
+      menuCtrl.register(someMenu1);
 
-      it('should enable a menu', () => {
-        let someMenu = mockMenu();
-        someMenu.enabled = true;
-        menuCtrl.register(someMenu);
-        someMenu._menuCtrl = menuCtrl;
-
-        let menu = menuCtrl.enable(true);
-        expect(menu.enabled).toEqual(true);
-
-        menu = menuCtrl.enable(false);
-        expect(menu.enabled).toEqual(false);
-      });
-
-      it('should be only one enabled menu on the same side', () => {
-        let someMenu1 = mockMenu();
-        someMenu1.enabled = true;
-        someMenu1.side = 'left';
-        someMenu1.id = 'menu1';
-        someMenu1._menuCtrl = menuCtrl;
-        menuCtrl.register(someMenu1);
-
-        let someMenu2 = mockMenu();
-        someMenu2.enabled = false;
-        someMenu2.side = 'left';
-        someMenu2.id = 'menu2';
-        someMenu2._menuCtrl = menuCtrl;
-        menuCtrl.register(someMenu2);
-
-        let someMenu3 = mockMenu();
-        someMenu3.enabled = true;
-        someMenu3.side = 'right';
-        someMenu3.id = 'menu2';
-        someMenu3._menuCtrl = menuCtrl;
-        menuCtrl.register(someMenu3);
-
-        menuCtrl.enable(true, 'menu1');
-        expect(someMenu1.enabled).toEqual(true);
-        expect(someMenu2.enabled).toEqual(false);
-        expect(someMenu3.enabled).toEqual(true);
-
-        menuCtrl.enable(true, 'menu2');
-        expect(someMenu1.enabled).toEqual(false);
-        expect(someMenu2.enabled).toEqual(true);
-        expect(someMenu3.enabled).toEqual(true);
-
-        menuCtrl.enable(true, 'menu1');
-        expect(someMenu1.enabled).toEqual(true);
-        expect(someMenu2.enabled).toEqual(false);
-        expect(someMenu3.enabled).toEqual(true);
-      });
+      let someMenu2 = mockMenu();
+      someMenu2.enabled = true;
+      menuCtrl.register(someMenu2);
 
+      let menu = menuCtrl.get();
+      expect(menu).toEqual(someMenu2);
     });
 
-    it('should register a menu', () => {
-      let menu = mockMenu();
-      menuCtrl.register(menu);
-      expect(menuCtrl.getMenus().length).toEqual(1);
-
-      let menu2 = mockMenu();
-      menuCtrl.register(menu2);
-      expect(menuCtrl.getMenus().length).toEqual(2);
-
-      menuCtrl.unregister(menu2);
-      menuCtrl.unregister(menu);
-
-      expect(menuCtrl.getMenus().length).toEqual(0);
-    });
-
-    let menuCtrl: MenuController;
-
-    beforeEach(() => {
-      menuCtrl = new MenuController();
-    });
-
-    function mockMenu(): Menu {
-      return new Menu(null, null, null, null, null, null, null);
-    }
-
   });
-}
+
+  describe('get() by id', () => {
+
+    it('should be null if no menus', () => {
+      let menu = menuCtrl.get('myid');
+      expect(menu).toEqual(null);
+    });
+
+    it('should be null if no matching menus with id', () => {
+      let someMenu = mockMenu();
+      someMenu.id = 'whatever';
+      menuCtrl.register(someMenu);
+
+      let menu = menuCtrl.get('myMenu');
+      expect(menu).toEqual(null);
+    });
+
+    it('should get the menu by id with matching id', () => {
+      let someMenu = mockMenu();
+      someMenu.id = 'myMenu';
+      menuCtrl.register(someMenu);
+
+      let menu = menuCtrl.get('myMenu');
+      expect(menu).toEqual(someMenu);
+    });
+
+    it('should get the menu by id with left', () => {
+      let someMenu = mockMenu();
+      someMenu.id = 'myMenu';
+      someMenu.side = 'left';
+      menuCtrl.register(someMenu);
+
+      let menu = menuCtrl.get('myMenu');
+      expect(menu).toEqual(someMenu);
+    });
+
+    it('should get the menu by id with matching id when multiple menus', () => {
+      let someMenu1 = mockMenu();
+      someMenu1.id = 'myMenu1';
+      menuCtrl.register(someMenu1);
+
+      let someMenu2 = mockMenu();
+      someMenu2.id = 'myMenu2';
+      menuCtrl.register(someMenu2);
+
+      let menu = menuCtrl.get('myMenu1');
+      expect(menu).toEqual(someMenu1);
+
+      menu = menuCtrl.get('myMenu2');
+      expect(menu).toEqual(someMenu2);
+    });
+
+  });
+
+  describe('get() by side', () => {
+
+    it('should not get a menu with a left side if no menus', () => {
+      let menu = menuCtrl.get('left');
+      expect(menu).toEqual(null);
+    });
+
+    it('should not get a menu with a right side if no menus', () => {
+      let menu = menuCtrl.get('right');
+      expect(menu).toEqual(null);
+    });
+
+    it('should get the only left menu', () => {
+      let someMenu = mockMenu();
+      someMenu.side = 'left';
+      menuCtrl.register(someMenu);
+
+      let menu = menuCtrl.get('left');
+      expect(menu).toEqual(someMenu);
+    });
+
+    it('should get the enabled left menu', () => {
+      let someMenu1 = mockMenu();
+      someMenu1.side = 'left';
+      someMenu1.enabled = false;
+      menuCtrl.register(someMenu1);
+
+      let someMenu2 = mockMenu();
+      someMenu2.side = 'left';
+      someMenu2.enabled = true;
+      menuCtrl.register(someMenu2);
+
+      let menu = menuCtrl.get('left');
+      expect(menu).toEqual(someMenu2);
+    });
+
+    it('should get the first left menu when all are disabled', () => {
+      let someMenu1 = mockMenu();
+      someMenu1.side = 'left';
+      someMenu1.enabled = false;
+      menuCtrl.register(someMenu1);
+
+      let someMenu2 = mockMenu();
+      someMenu2.side = 'left';
+      someMenu2.enabled = false;
+      menuCtrl.register(someMenu2);
+
+      let menu = menuCtrl.get('left');
+      expect(menu).toEqual(someMenu1);
+    });
+
+    it('should get the only right menu', () => {
+      let someMenu = mockMenu();
+      someMenu.side = 'right';
+      menuCtrl.register(someMenu);
+
+      let menu = menuCtrl.get('right');
+      expect(menu).toEqual(someMenu);
+    });
+
+    it('should get the menu by left with id', () => {
+      let someMenu = mockMenu();
+      someMenu.id = 'myMenu';
+      someMenu.side = 'left';
+      menuCtrl.register(someMenu);
+
+      let menu = menuCtrl.get('left');
+      expect(menu).toEqual(someMenu);
+    });
+
+  });
+
+  describe('enable()', () => {
+
+    it('should enable a menu', () => {
+      let someMenu = mockMenu();
+      someMenu.enabled = true;
+      menuCtrl.register(someMenu);
+      someMenu._menuCtrl = menuCtrl;
+
+      let menu = menuCtrl.enable(true);
+      expect(menu.enabled).toEqual(true);
+
+      menu = menuCtrl.enable(false);
+      expect(menu.enabled).toEqual(false);
+    });
+
+    it('should be only one enabled menu on the same side', () => {
+      let someMenu1 = mockMenu();
+      someMenu1.enabled = true;
+      someMenu1.side = 'left';
+      someMenu1.id = 'menu1';
+      someMenu1._menuCtrl = menuCtrl;
+      menuCtrl.register(someMenu1);
+
+      let someMenu2 = mockMenu();
+      someMenu2.enabled = false;
+      someMenu2.side = 'left';
+      someMenu2.id = 'menu2';
+      someMenu2._menuCtrl = menuCtrl;
+      menuCtrl.register(someMenu2);
+
+      let someMenu3 = mockMenu();
+      someMenu3.enabled = true;
+      someMenu3.side = 'right';
+      someMenu3.id = 'menu2';
+      someMenu3._menuCtrl = menuCtrl;
+      menuCtrl.register(someMenu3);
+
+      menuCtrl.enable(true, 'menu1');
+      expect(someMenu1.enabled).toEqual(true);
+      expect(someMenu2.enabled).toEqual(false);
+      expect(someMenu3.enabled).toEqual(true);
+
+      menuCtrl.enable(true, 'menu2');
+      expect(someMenu1.enabled).toEqual(false);
+      expect(someMenu2.enabled).toEqual(true);
+      expect(someMenu3.enabled).toEqual(true);
+
+      menuCtrl.enable(true, 'menu1');
+      expect(someMenu1.enabled).toEqual(true);
+      expect(someMenu2.enabled).toEqual(false);
+      expect(someMenu3.enabled).toEqual(true);
+    });
+
+  });
+
+  it('should register a menu', () => {
+    let menu = mockMenu();
+    menuCtrl.register(menu);
+    expect(menuCtrl.getMenus().length).toEqual(1);
+
+    let menu2 = mockMenu();
+    menuCtrl.register(menu2);
+    expect(menuCtrl.getMenus().length).toEqual(2);
+
+    menuCtrl.unregister(menu2);
+    menuCtrl.unregister(menu);
+
+    expect(menuCtrl.getMenus().length).toEqual(0);
+  });
+
+  let menuCtrl: MenuController;
+
+  beforeEach(() => {
+    menuCtrl = new MenuController();
+  });
+
+});
diff --git a/src/components/menu/test/multiple/index.ts b/src/components/menu/test/multiple/app-module.ts
similarity index 55%
rename from src/components/menu/test/multiple/index.ts
rename to src/components/menu/test/multiple/app-module.ts
index f586c172ab..486d0ce88c 100644
--- a/src/components/menu/test/multiple/index.ts
+++ b/src/components/menu/test/multiple/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, MenuController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, MenuController } from '../../../..';
 
 
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
   activeMenu: string;
 
   constructor(private menu: MenuController) {
@@ -27,8 +27,22 @@ class Page1 {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = Page1;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/push/index.ts b/src/components/menu/test/overlay/app-module.ts
similarity index 60%
rename from src/components/menu/test/push/index.ts
rename to src/components/menu/test/overlay/app-module.ts
index edd3483ed3..b1a1adaa3e 100644
--- a/src/components/menu/test/push/index.ts
+++ b/src/components/menu/test/overlay/app-module.ts
@@ -1,15 +1,15 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, Nav, AlertController } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Nav, AlertController } from '../../../..';
 
 
 @Component({templateUrl: 'page1.html'})
-class Page1 {}
+export class Page1 {}
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   @ViewChild(Nav) nav: Nav;
 
   rootView = Page1;
@@ -34,4 +34,18 @@ class E2EApp {
   }
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/overlay/page1.html b/src/components/menu/test/overlay/page1.html
index 5ce04fd927..e9dac04c54 100644
--- a/src/components/menu/test/overlay/page1.html
+++ b/src/components/menu/test/overlay/page1.html
@@ -25,6 +25,6 @@
     <button ion-button menuToggle="myMenuId2">Toggle Right Overlay Menu</button>
   </p>
 
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/menu/test/overlay/index.ts b/src/components/menu/test/push/app-module.ts
similarity index 60%
rename from src/components/menu/test/overlay/index.ts
rename to src/components/menu/test/push/app-module.ts
index edd3483ed3..b1a1adaa3e 100644
--- a/src/components/menu/test/overlay/index.ts
+++ b/src/components/menu/test/push/app-module.ts
@@ -1,15 +1,15 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, Nav, AlertController } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Nav, AlertController } from '../../../..';
 
 
 @Component({templateUrl: 'page1.html'})
-class Page1 {}
+export class Page1 {}
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   @ViewChild(Nav) nav: Nav;
 
   rootView = Page1;
@@ -34,4 +34,18 @@ class E2EApp {
   }
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/push/page1.html b/src/components/menu/test/push/page1.html
index b8d81f29ad..681f777262 100644
--- a/src/components/menu/test/push/page1.html
+++ b/src/components/menu/test/push/page1.html
@@ -25,6 +25,6 @@
     <button ion-button menuToggle="right">Toggle Right Push Menu</button>
   </p>
 
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/menu/test/reveal/index.ts b/src/components/menu/test/reveal/app-module.ts
similarity index 52%
rename from src/components/menu/test/reveal/index.ts
rename to src/components/menu/test/reveal/app-module.ts
index f5c5e21ebc..3c955d2696 100644
--- a/src/components/menu/test/reveal/index.ts
+++ b/src/components/menu/test/reveal/app-module.ts
@@ -1,15 +1,15 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, Nav } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Nav } from '../../../..';
 
 
 @Component({templateUrl: 'page1.html'})
-class Page1 {}
+export class Page1 {}
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   @ViewChild(Nav) nav: Nav;
 
   rootView = Page1;
@@ -24,4 +24,18 @@ class E2EApp {
   }
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/menu/test/reveal/page1.html b/src/components/menu/test/reveal/page1.html
index 10d58e4352..774a0dbe98 100644
--- a/src/components/menu/test/reveal/page1.html
+++ b/src/components/menu/test/reveal/page1.html
@@ -25,6 +25,6 @@
     <button ion-button menuToggle="right">Toggle Right Reveal Menu</button>
   </p>
 
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/modal/test/basic/index.ts b/src/components/modal/test/basic/app-module.ts
similarity index 80%
rename from src/components/modal/test/basic/index.ts
rename to src/components/modal/test/basic/app-module.ts
index b45199ae39..91116b8db4 100644
--- a/src/components/modal/test/basic/index.ts
+++ b/src/components/modal/test/basic/app-module.ts
@@ -1,10 +1,12 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, Injectable, NgModule } from '@angular/core';
 
-import { ActionSheetController, App, Config, ionicBootstrap, ModalController, NavController, NavParams, PageTransition, Platform, TransitionOptions, ViewController } from '../../../../../src';
+import { ActionSheetController, App, Config,
+  IonicApp, IonicModule, ModalController, NavController,
+  NavParams, Platform, ViewController } from '../../../..';
 
 
 @Injectable()
-class SomeComponentProvider {
+export class SomeComponentProvider {
   constructor(public config: Config) {
     console.log('SomeComponentProvider constructor');
   }
@@ -15,7 +17,7 @@ class SomeComponentProvider {
 }
 
 @Injectable()
-class SomeAppProvider {
+export class SomeAppProvider {
   constructor(public config: Config) {
     console.log('SomeAppProvider constructor');
   }
@@ -29,7 +31,7 @@ class SomeAppProvider {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   platforms: string[];
 
   constructor(public navCtrl: NavController, public modalCtrl: ModalController, config: Config, platform: Platform) {
@@ -77,10 +79,6 @@ class E2EPage {
   presentToolbarModal() {
     let modal = this.modalCtrl.create(ToolbarModal);
     modal.present();
-
-    modal.subscribe((data: any) => {
-      console.log('modal data', data);
-    });
   }
 
   presentModalWithInputs() {
@@ -91,19 +89,12 @@ class E2EPage {
     modal.present();
   }
 
-  presentModalCustomAnimation() {
-    let modal = this.modalCtrl.create(ContactUs);
-    modal.present({
-      animation: 'my-fade-in'
-    });
-  }
-
   presentNavigableModal() {
     this.modalCtrl.create(NavigableModal).present();
   }
 
-  ionViewLoaded() {
-    console.log('E2EPage ionViewLoaded fired');
+  ionViewDidLoad() {
+    console.log('E2EPage ionViewDidLoad fired');
   }
 
   ionViewWillEnter() {
@@ -127,22 +118,32 @@ class E2EPage {
   template: `
   <ion-header>
     <ion-navbar>
+      <ion-buttons>
+        <button ion-button (click)="dismiss()">Close</button>
+      </ion-buttons>
       <ion-title>Page One</ion-title>
     </ion-navbar>
   </ion-header>
 
   <ion-content>
+    <div padding>
+      NavigableModal
+    </div>
     <button ion-button full (click)="submit()">Submit</button>
   </ion-content>
   `
 })
-class NavigableModal {
+export class NavigableModal {
 
-  constructor(public navCtrl: NavController) {}
+  constructor(public navCtrl: NavController, public viewCtrl: ViewController) {}
 
   submit() {
     this.navCtrl.push(NavigableModal2);
   }
+
+  dismiss() {
+    this.viewCtrl.dismiss();
+  }
 }
 
 @Component({
@@ -158,7 +159,7 @@ class NavigableModal {
   </ion-content>
   `
 })
-class NavigableModal2 {
+export class NavigableModal2 {
 
   constructor(public navCtrl: NavController) {}
 
@@ -192,7 +193,7 @@ class NavigableModal2 {
   `,
   providers: [SomeComponentProvider]
 })
-class ModalPassData {
+export class ModalPassData {
   data: any;
 
   constructor(params: NavParams, public viewCtrl: ViewController, someComponentProvider: SomeComponentProvider, someAppProvider: SomeAppProvider) {
@@ -208,8 +209,8 @@ class ModalPassData {
     this.viewCtrl.dismiss(this.data);
   }
 
-  ionViewLoaded() {
-    console.log('ModalPassData ionViewLoaded fired');
+  ionViewDidLoad() {
+    console.log('ModalPassData ionViewDidLoad fired');
   }
 
   ionViewWillEnter() {
@@ -257,20 +258,17 @@ class ModalPassData {
 
       <div>Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
 
-      <button ion-button block color="danger" (click)="dismiss()" class="e2eCloseToolbarModal">
+      <button ion-button block color="danger" (click)="dismiss()">
         Dismission Modal
       </button>
     </ion-content>
   `
 })
-class ToolbarModal {
+export class ToolbarModal {
 
   constructor(public viewCtrl: ViewController) {}
 
   dismiss() {
-    this.viewCtrl.emit({
-      toolbar: 'data'
-    });
     this.viewCtrl.dismiss();
   }
 
@@ -292,16 +290,16 @@ class ToolbarModal {
       <form #addForm="ngForm" (submit)="save($event)" novalidate>
         <ion-list>
           <ion-item>
-            <ion-label floating>Title <span [hidden]="title.valid">(Required)</span></ion-label>
-            <ion-input formControlName="title" type="text" [(ngModel)]="data.title" #title="ngForm" required autofocus></ion-input>
+            <ion-label floating>Title <span [hidden]="data.title.valid">(Required)</span></ion-label>
+            <ion-input formControlName="title" type="text" [(ngModel)]="data.title" required autofocus></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label floating>Note <span [hidden]="note.valid">(Required)</span></ion-label>
-            <ion-input formControlName="note" type="text" [(ngModel)]="data.note" #note="ngForm" required></ion-input>
+            <ion-label floating>Note <span [hidden]="data.note.valid">(Required)</span></ion-label>
+            <ion-input formControlName="note" type="text" [(ngModel)]="data.note" required></ion-input>
           </ion-item>
           <ion-item>
             <ion-label floating>Icon</ion-label>
-            <ion-input formControlName="icon" type="text" [(ngModel)]="data.icon" #icon="ngForm" autocomplete="on" autocorrect="on"></ion-input>
+            <ion-input formControlName="icon" type="text" [(ngModel)]="data.icon" autocomplete="on" autocorrect="on"></ion-input>
           </ion-item>
         </ion-list>
         <div padding>
@@ -311,7 +309,7 @@ class ToolbarModal {
     </ion-content>
   `
 })
-class ModalWithInputs {
+export class ModalWithInputs {
   data: any;
 
   constructor(public viewCtrl: ViewController) {
@@ -335,14 +333,14 @@ class ModalWithInputs {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ContactUs {
+export class ContactUs {
   root = ModalFirstPage;
 
   constructor() {
     console.log('ContactUs constructor');
   }
-  ionViewLoaded() {
-    console.log('ContactUs ionViewLoaded');
+  ionViewDidLoad() {
+    console.log('ContactUs ionViewDidLoad');
   }
   ionViewWillEnter() {
     console.log('ContactUs ionViewWillEnter');
@@ -359,9 +357,6 @@ class ContactUs {
   ionViewWillUnload() {
     console.log('ContactUs ionViewWillUnload');
   }
-  ionViewDidUnload() {
-    console.log('ContactUs ionViewDidUnload');
-  }
 }
 
 
@@ -383,8 +378,8 @@ class ContactUs {
       <p>
         <button ion-button (click)="openActionSheet()">Open Action Sheet</button>
       </p>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <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-list>
         <ion-item *ngFor="let item of items">
           Item Number: {{item.value}}
@@ -393,7 +388,7 @@ class ContactUs {
     </ion-content>
   `
 })
-class ModalFirstPage {
+export class ModalFirstPage {
   items: any[] = [];
 
   constructor(public navCtrl: NavController, public app: App, public actionSheetCtrl: ActionSheetController) {
@@ -415,8 +410,8 @@ class ModalFirstPage {
     this.navCtrl.parent.pop();
   }
 
-  ionViewLoaded() {
-    console.log('ModalFirstPage ionViewLoaded fired');
+  ionViewDidLoad() {
+    console.log('ModalFirstPage ionViewDidLoad fired');
   }
 
   ionViewWillEnter() {
@@ -446,11 +441,8 @@ class ModalFirstPage {
         {
           text: 'Go To Root',
           handler: () => {
-            // overlays are added and removed from the root navigation
-            // find the root navigation, and pop this alert
-            // when the alert is done animating out, then pop off the modal
-            this.app.getRootNav().pop().then(() => {
-              this.app.getRootNav().pop();
+            actionSheet.dismiss().then(() => {
+              this.navCtrl.parent.pop();
             });
 
             // by default an alert will dismiss itself
@@ -486,18 +478,18 @@ class ModalFirstPage {
       <p>
         <button ion-button (click)="navCtrl.pop()">Pop (Go back to 1st)</button>
       </p>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <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>
   `
 })
-class ModalSecondPage {
+export class ModalSecondPage {
   constructor(public navCtrl: NavController, params: NavParams) {
     console.log('Second page params:', params);
   }
 
-  ionViewLoaded() {
-    console.log('ModalSecondPage ionViewLoaded');
+  ionViewDidLoad() {
+    console.log('ModalSecondPage ionViewDidLoad');
   }
 
   ionViewWillEnter() {
@@ -513,36 +505,40 @@ class ModalSecondPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp, [SomeAppProvider]);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    ModalFirstPage,
+    ModalSecondPage,
+    ModalWithInputs,
+    ContactUs,
+    NavigableModal,
+    NavigableModal2,
+    ModalPassData,
+    ToolbarModal
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  providers: [SomeAppProvider],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    ModalFirstPage,
+    ModalSecondPage,
+    ModalWithInputs,
+    ContactUs,
+    NavigableModal,
+    NavigableModal2,
+    ModalPassData,
+    ToolbarModal
+  ]
+})
+export class AppModule {}
 
-
-class FadeIn extends PageTransition {
-  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
-    super(enteringView, leavingView, opts);
-    this
-      .element(enteringView.pageRef())
-      .easing('ease')
-      .duration(1000)
-      .fromTo('translateY', '0%', '0%')
-      .fromTo('opacity', 0, 1, true)
-      .before.addClass('show-page');
-  }
-}
-PageTransition.register('my-fade-in', FadeIn);
-
-class FadeOut extends PageTransition {
-  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
-    super(enteringView, leavingView, opts);
-    this
-      .element(leavingView.pageRef())
-      .easing('ease')
-      .duration(500)
-      .fromTo('opacity', 1, 0)
-      .before.addClass('show-page');
-  }
-}
-PageTransition.register('my-fade-out', FadeOut);
diff --git a/src/components/modal/test/basic/main.html b/src/components/modal/test/basic/main.html
index 469ac549e0..8a43c64807 100644
--- a/src/components/modal/test/basic/main.html
+++ b/src/components/modal/test/basic/main.html
@@ -24,9 +24,6 @@
   <p>
     <button ion-button (click)="presentModalWithInputs()">Present modal w/ inputs</button>
   </p>
-  <p>
-    <button ion-button (click)="presentModalCustomAnimation()">Modal: Custom Animation</button>
-  </p>
   <p>
     {{platforms | json}}
   </p>
diff --git a/src/components/modal/test/modal.spec.ts b/src/components/modal/test/modal.spec.ts
index 56e352bc05..921f1a6f51 100644
--- a/src/components/modal/test/modal.spec.ts
+++ b/src/components/modal/test/modal.spec.ts
@@ -1,24 +1,22 @@
 import { Component } from '@angular/core';
-import { ModalController, ViewController } from '../../../../src';
-import { ModalCmp } from '../../../../src/components/modal/modal-component';
+import { ModalController } from '../modal';
+import { ModalCmp } from '../modal-component';
+import { ViewController } from '../../../navigation/view-controller';
 
-export function run() {
-  describe('Modal', () => {
+describe('Modal', () => {
 
-    describe('create', () => {
+  describe('create', () => {
 
-      it('should have the correct properties on modal view controller instance', () => {
-        let modalCtrl = new ModalController(null);
-        let modalViewController = modalCtrl.create(ComponentToPresent);
-        expect(modalViewController.componentType).toEqual(ModalCmp);
-        expect(modalViewController.isOverlay).toEqual(true);
-        expect(modalViewController instanceof ViewController).toEqual(true);
-      });
+    it('should have the correct properties on modal view controller instance', () => {
+      let modalCtrl = new ModalController(null);
+      let modalViewController = modalCtrl.create(ComponentToPresent);
+      expect(modalViewController.component).toEqual(ModalCmp);
+      expect(modalViewController.isOverlay).toEqual(true);
+      expect(modalViewController instanceof ViewController).toEqual(true);
     });
-
   });
 
-}
+});
 
 @Component({
   template: `<div class="myComponent"></div>`
diff --git a/src/components/nav/test/basic/index.ts b/src/components/nav/test/basic/app-module.ts
similarity index 65%
rename from src/components/nav/test/basic/index.ts
rename to src/components/nav/test/basic/app-module.ts
index 5bcfcfd92b..61fee90a52 100644
--- a/src/components/nav/test/basic/index.ts
+++ b/src/components/nav/test/basic/app-module.ts
@@ -1,14 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { NavController, AlertController, Content } from '../../../../../src';
-import { ionicBootstrap, App } from '../../../../../src';
-import { NavParams, ViewController } from '../../../../../src';
-
+import { NgModule, Component, ViewChild } from '@angular/core';
+import { App, AlertController, Content, DeepLinkConfig, IonicApp, IonicModule, NavController, NavParams, ViewController } from '../../../..';
 
 @Component({
   selector: 'my-cmp',
   template: `<p>My Custom Component Test <ion-icon name="star"></ion-icon></p>`
 })
-class MyCmpTest {}
+export class MyCmpTest {}
 
 
 @Component({
@@ -24,29 +21,28 @@ class MyCmpTest {}
         </ion-buttons>
       </ion-navbar>
     </ion-header>
-
     <ion-content>
       <ion-list>
         <ion-list-header>
           {{title}}
         </ion-list-header>
-
         <button ion-item class="e2eFrom1To2" (click)="pushFullPage()">Push to FullPage</button>
         <button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
         <button ion-item (click)="pushAnother()">Push to AnotherPage</button>
-
         <ion-item>
           <ion-label>Text Input</ion-label>
           <ion-textarea></ion-textarea>
         </ion-item>
-
-        <button ion-item [navPush]="[pushPage, {id: 42}]">Push FullPage w/ [navPush] array</button>
+        <button ion-item navPush="FullPage">Push FullPage w/ navPush="FullPage"</button>
         <button ion-item [navPush]="pushPage" [navParams]="{id:40}">Push w/ [navPush] and [navParams]</button>
-        <button ion-item [navPush]="[\'FirstPage\', {id: 22}]">Push w/ [navPush] array and string view name</button>
-        <button ion-item [navPush]="FirstPage" [navParams]="{id: 23}">Push w/ [navPush] and [navParams]</button>
+        <button ion-item [navPush]="'FirstPage'">Push w/ [navPush] and string view name</button>
         <button ion-item (click)="setPages()">setPages() (Go to PrimaryHeaderPage)</button>
         <button ion-item (click)="setRoot()">setRoot(PrimaryHeaderPage) (Go to PrimaryHeaderPage)</button>
         <button ion-item (click)="navCtrl.pop()">Pop</button>
+        <ion-item>
+          <ion-label>Toggle Can Leave</ion-label>
+          <ion-toggle (click)="canLeave = !canLeave"></ion-toggle>
+        </ion-item>
         <button ion-item (click)="viewDismiss()">View Dismiss</button>
         <button ion-item (click)="quickPush()">New push during transition</button>
         <button ion-item (click)="quickPop()">New pop during transition</button>
@@ -56,24 +52,61 @@ class MyCmpTest {}
         <button ion-item (click)="content.scrollToTop()">Scroll to top</button>
       </ion-list>
       <my-cmp></my-cmp>
-    </ion-content>`,
-  directives: [MyCmpTest]
+    </ion-content>`
 })
-class FirstPage {
+export class FirstPage {
   pushPage = FullPage;
   title = 'First Page';
   pages: Array<number> = [];
   @ViewChild(Content) content: Content;
+  canLeave = true;
 
   constructor(
     public navCtrl: NavController,
-    public view: ViewController
-  ) {
+    public viewCtrl: ViewController,
+    public alertCtrl: AlertController
+  ) {}
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad, FirstPage');
     for (var i = 1; i <= 50; i++) {
       this.pages.push(i);
     }
   }
 
+  ionViewWillEnter() {
+    console.log('ionViewWillEnter, FirstPage', this.viewCtrl.id);
+  }
+
+  ionViewDidEnter() {
+    console.log('ionViewDidEnter, FirstPage', this.viewCtrl.id);
+  }
+
+  ionViewWillLeave() {
+    console.log('ionViewWillLeave, FirstPage', this.viewCtrl.id);
+  }
+
+  ionViewDidLeave() {
+    console.log('ionViewDidLeave, FirstPage', this.viewCtrl.id);
+  }
+
+  ionViewWillUnload() {
+    console.log('ionViewWillUnload, FirstPage', this.viewCtrl.id);
+  }
+
+  ionViewCanLeave() {
+    if (this.canLeave) {
+      return true;
+    }
+
+    let alert = this.alertCtrl.create();
+    alert.setMessage('You can check-out any time you like, but you can never leave.');
+    alert.addButton({ text: 'Umm, ok', role: 'cancel', });
+    alert.present();
+
+    return false;
+  }
+
   setPages() {
     let items = [
       { page: PrimaryHeaderPage }
@@ -87,33 +120,40 @@ class FirstPage {
   }
 
   pushPrimaryHeaderPage() {
-    this.navCtrl.push(PrimaryHeaderPage);
+    this.navCtrl.push(PrimaryHeaderPage).then(() => {}, (rejectReason: string) => {
+    });
   }
 
   pushFullPage() {
-    this.navCtrl.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
+    this.navCtrl.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] }).catch(() => {
+    });
   }
 
   pushAnother() {
-    this.navCtrl.push(AnotherPage);
+    this.navCtrl.push(AnotherPage).catch(() => {
+    });
   }
 
   quickPush() {
-    this.navCtrl.push(AnotherPage);
+    this.navCtrl.push(AnotherPage).catch(() => {
+    });
     setTimeout(() => {
-      this.navCtrl.push(PrimaryHeaderPage);
+      this.navCtrl.push(PrimaryHeaderPage).catch(() => {
+      });
     }, 150);
   }
 
   quickPop() {
-    this.navCtrl.push(AnotherPage);
+    this.navCtrl.push(AnotherPage).catch(() => {
+    });
     setTimeout(() => {
-      this.navCtrl.remove(1, 1);
+      this.navCtrl.remove(1, 1).catch(() => {
+      });
     }, 250);
   }
 
   viewDismiss() {
-    this.view.dismiss();
+    this.viewCtrl.dismiss();
   }
 
   reload() {
@@ -145,14 +185,39 @@ class FirstPage {
     </ion-content>
   `
 })
-class FullPage {
+export class FullPage {
   constructor(
     public navCtrl: NavController,
+    public viewCtrl: ViewController,
     public app: App,
     public alertCtrl: AlertController,
     public params: NavParams
   ) {}
 
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad, FullPage', this.viewCtrl.id);
+  }
+
+  ionViewWillEnter() {
+    console.log('ionViewWillEnter, FullPage', this.viewCtrl.id);
+  }
+
+  ionViewDidEnter() {
+    console.log('ionViewDidEnter, FullPage', this.viewCtrl.id);
+  }
+
+  ionViewWillLeave() {
+    console.log('ionViewWillLeave, FullPage', this.viewCtrl.id);
+  }
+
+  ionViewDidLeave() {
+    console.log('ionViewDidLeave, FullPage', this.viewCtrl.id);
+  }
+
+  ionViewWillUnload() {
+    console.log('ionViewWillUnload, FullPage', this.viewCtrl.id);
+  }
+
   setPages() {
     let items = [
       { page: FirstPage },
@@ -213,10 +278,9 @@ class FullPage {
         </ion-buttons>
       </ion-navbar>
       <ion-toolbar no-border-top>
-        <ion-title>I'm a sub header!</ion-title>
+        <ion-title>{{subheader}}</ion-title>
       </ion-toolbar>
     </ion-header>
-
     <ion-content padding fullscreen>
       <p><button ion-button class="e2eFrom3To2" (click)="navCtrl.pop()">Pop</button></p>
       <p><button ion-button (click)="pushAnother()">Push to AnotherPage</button></p>
@@ -225,13 +289,12 @@ class FullPage {
       <p><button ion-button (click)="navCtrl.popToRoot()">Pop to root</button></p>
       <p><button ion-button id="insert" (click)="insert()">Insert first page into history before this</button></p>
       <p><button ion-button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
-      <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
+      <div class="yellow"><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></div>
       <ion-fixed style="bottom:0">
         <button ion-button (click)="presentAlert()">fixed button (alert)</button>
       </ion-fixed>
       <ion-fixed style="pointer-events: none; top:0; bottom:0; right:0; width:50%; background: rgba(0,0,0,0.5);"></ion-fixed>
     </ion-content>
-
     <ion-footer>
       <ion-toolbar no-border-bottom>
         I'm a sub footer!
@@ -242,15 +305,39 @@ class FullPage {
     </ion-footer>
   `
 })
-class PrimaryHeaderPage {
+export class PrimaryHeaderPage {
+  subheader: string;
+
   constructor(
     public navCtrl: NavController,
     public alertCtrl: AlertController,
     public viewCtrl: ViewController
   ) {}
 
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad, PrimaryHeaderPage', this.viewCtrl.id);
+  }
+
   ionViewWillEnter() {
+    console.log('ionViewWillEnter, PrimaryHeaderPage', this.viewCtrl.id);
     this.viewCtrl.setBackButtonText('Previous');
+    this.subheader = 'I\'m a sub header!';
+  }
+
+  ionViewDidEnter() {
+    console.log('ionViewDidEnter, PrimaryHeaderPage', this.viewCtrl.id);
+  }
+
+  ionViewWillLeave() {
+    console.log('ionViewWillLeave, PrimaryHeaderPage', this.viewCtrl.id);
+  }
+
+  ionViewDidLeave() {
+    console.log('ionViewDidLeave, PrimaryHeaderPage', this.viewCtrl.id);
+  }
+
+  ionViewWillUnload() {
+    console.log('ionViewWillUnload, PrimaryHeaderPage', this.viewCtrl.id);
   }
 
   pushAnother() {
@@ -289,20 +376,15 @@ class PrimaryHeaderPage {
         <ion-title>Another Page Header</ion-title>
       </ion-navbar>
     </ion-header>
-
     <ion-content>
-
       <ion-toolbar no-border-top>
         I'm a sub header in the content!
       </ion-toolbar>
-
       <ion-list>
-
         <ion-item>
           <ion-label>Text Input</ion-label>
           <ion-textarea></ion-textarea>
         </ion-item>
-
         <ion-item>Back button hidden w/ <code>ion-navbar hideBackButton</code></ion-item>
         <button ion-item (click)="navCtrl.pop()">Pop</button>
         <button ion-item (click)="pushFullPage()">Push to FullPage</button>
@@ -311,19 +393,15 @@ class PrimaryHeaderPage {
         <button ion-item (click)="setRoot()">setRoot(FirstPage)</button>
         <button ion-item (click)="toggleBackButton()">Toggle hideBackButton</button>
         <button ion-item (click)="setBackButtonText()">Set Back Button Text</button>
-        <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+        <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-list>
-
       <ion-toolbar no-border-bottom>
         I'm a sub footer in the content!
       </ion-toolbar>
-
       <ion-toolbar no-border-bottom no-border-top>
         And I'm a sub footer in the content too!
       </ion-toolbar>
-
     </ion-content>
-
     <ion-footer>
       <ion-toolbar>
         Another Page Footer
@@ -331,15 +409,37 @@ class PrimaryHeaderPage {
     </ion-footer>
   `
 })
-class AnotherPage {
+export class AnotherPage {
   bbHideToggleVal = false;
   bbCount = 0;
 
   constructor(
     public navCtrl: NavController,
     public viewCtrl: ViewController
-  ) {
-    console.log('Page, AnotherPage, constructor', this.viewCtrl.id);
+  ) { }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad, AnotherPage', this.viewCtrl.id);
+  }
+
+  ionViewWillEnter() {
+    console.log('ionViewWillEnter, AnotherPage', this.viewCtrl.id);
+  }
+
+  ionViewDidEnter() {
+    console.log('ionViewDidEnter, AnotherPage', this.viewCtrl.id);
+  }
+
+  ionViewWillLeave() {
+    console.log('ionViewWillLeave, AnotherPage', this.viewCtrl.id);
+  }
+
+  ionViewDidLeave() {
+    console.log('ionViewDidLeave, AnotherPage', this.viewCtrl.id);
+  }
+
+  ionViewWillUnload() {
+    console.log('ionViewWillUnload, AnotherPage', this.viewCtrl.id);
   }
 
   pushFullPage() {
@@ -374,51 +474,46 @@ class AnotherPage {
     ++this.bbCount;
   }
 
-  ionViewWillEnter() {
-    console.log('Page, AnotherPage, ionViewWillEnter', this.viewCtrl.id);
-  }
-
-  ionViewDidEnter() {
-    console.log('Page, AnotherPage, ionViewDidEnter', this.viewCtrl.id);
-  }
-
-  ionViewWillLeave() {
-    console.log('Page, AnotherPage, ionViewWillLeave', this.viewCtrl.id);
-  }
-
-  ionViewDidLeave() {
-    console.log('Page, AnotherPage, ionViewDidLeave', this.viewCtrl.id);
-  }
-
-  ionViewWillUnload() {
-    console.log('Page, AnotherPage, ionViewWillUnload', this.viewCtrl.id);
-  }
-
-  ionViewDidUnload() {
-    console.log('Page, AnotherPage, ionViewDidUnload', this.viewCtrl.id);
-  }
-
-  ngOnDestroy() {
-    console.log('Page, AnotherPage, ngOnDestroy', this.viewCtrl.id);
-  }
 }
 
 
 @Component({
-  template: `<ion-nav [root]="root"></ion-nav>`,
-  host: {
-    '[class.is-change-detecting]': 'isChangeDetecting'
-  }
+  template: `<ion-nav [root]="root"></ion-nav>`
 })
-class E2EApp {
+export class E2EApp {
   root = FirstPage;
-
-  get isChangeDetecting() {
-    console.log('isChangeDetecting');
-    return true;
-  }
 }
 
-ionicBootstrap(E2EApp).then((componetRef) => {
-  console.log('ionicBootstrap', componetRef);
-});
+
+export const deepLinkConfig: DeepLinkConfig = {
+  links: [
+    { component: FirstPage, name: 'first-page' },
+    { component: AnotherPage, name: 'another-page' },
+    { component: MyCmpTest, name: 'tab1-page1' },
+    { component: FullPage, name: 'full-page' },
+    { component: PrimaryHeaderPage, name: 'primary-header-page' },
+  ]
+};
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    FirstPage,
+    AnotherPage,
+    MyCmpTest,
+    FullPage,
+    PrimaryHeaderPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, null, deepLinkConfig)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    FirstPage,
+    AnotherPage,
+    FullPage,
+    PrimaryHeaderPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/nav/test/child-navs/index.ts b/src/components/nav/test/child-navs/app-module.ts
similarity index 73%
rename from src/components/nav/test/child-navs/index.ts
rename to src/components/nav/test/child-navs/app-module.ts
index 50e4a2cdf8..39589206f9 100644
--- a/src/components/nav/test/child-navs/index.ts
+++ b/src/components/nav/test/child-navs/app-module.ts
@@ -1,15 +1,13 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController } from '../../../../../src';
+import { NgModule, Component } from '@angular/core';
+import { IonicApp, IonicModule, NavController } from '../../../..';
 
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`,
 })
-class E2EApp {
+export class E2EApp {
   root = LandingPage;
 }
 
-ionicBootstrap(E2EApp);
-
 @Component({
   template: `
   <ion-header>
@@ -27,7 +25,7 @@ ionicBootstrap(E2EApp);
   </ion-content>
   `
 })
-class LandingPage {
+export class LandingPage {
 
   constructor(public navCtrl: NavController) {
   }
@@ -53,7 +51,7 @@ class LandingPage {
   </ion-content>
   `
 })
-class FirstPage {
+export class FirstPage {
   root = SecondPage;
 }
 
@@ -73,7 +71,7 @@ class FirstPage {
   </ion-content>
   `
 })
-class SecondPage {
+export class SecondPage {
   root = ThirdPage;
 }
 
@@ -93,7 +91,7 @@ class SecondPage {
   </ion-content>
   `
 })
-class ThirdPage {
+export class ThirdPage {
   root = FourthPage;
 }
 
@@ -108,8 +106,8 @@ class ThirdPage {
   </ion-content>
   `
 })
-class FourthPage {
-  private items: string[];
+export class FourthPage {
+  items: string[];
 
   ionViewWillEnter() {
     let items: string[] = [];
@@ -119,3 +117,27 @@ class FourthPage {
     this.items = items;
   }
 }
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    LandingPage,
+    FirstPage,
+    SecondPage,
+    ThirdPage,
+    FourthPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    LandingPage,
+    FirstPage,
+    SecondPage,
+    ThirdPage,
+    FourthPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/nav/test/init-async/app-module.ts b/src/components/nav/test/init-async/app-module.ts
new file mode 100644
index 0000000000..2bf06b07b8
--- /dev/null
+++ b/src/components/nav/test/init-async/app-module.ts
@@ -0,0 +1,43 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  template: `
+    <ion-content padding text-center>
+      Page be loaded!
+    </ion-content>
+  `
+})
+export class AsyncPage {}
+
+
+@Component({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+export class E2EApp {
+  root: AsyncPage;
+
+  constructor() {
+    setTimeout(() => {
+      this.root = AsyncPage;
+    }, 1000);
+
+  }
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    AsyncPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    AsyncPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/nav/test/init-async/index.ts b/src/components/nav/test/init-async/index.ts
deleted file mode 100644
index f3e2bae931..0000000000
--- a/src/components/nav/test/init-async/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  template: `
-    <ion-content padding text-center>
-      Page be loaded!
-    </ion-content>
-  `
-})
-class AsyncPage {}
-
-
-@Component({
-  template: `<ion-nav [root]="root"></ion-nav>`
-})
-class E2EApp {
-  root: AsyncPage;
-
-  constructor() {
-    setTimeout(() => {
-      this.root = AsyncPage;
-    }, 1000);
-
-  }
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/nav/test/insert-views/index.ts b/src/components/nav/test/insert-views/app-module.ts
similarity index 68%
rename from src/components/nav/test/insert-views/index.ts
rename to src/components/nav/test/insert-views/app-module.ts
index b719154f8e..695f439499 100644
--- a/src/components/nav/test/insert-views/index.ts
+++ b/src/components/nav/test/insert-views/app-module.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, NavController } from '../../../..';
 
 
 @Component({
@@ -14,7 +14,7 @@ import { ionicBootstrap, NavController } from '../../../../../src';
       <button ion-button block (click)="pushPage()">Push Page</button>
     </ion-content>`,
 })
-class FirstPage {
+export class FirstPage {
   constructor(public navCtrl: NavController) {}
 
   pushPage() {
@@ -37,7 +37,7 @@ class FirstPage {
     </ion-content>
   `
 })
-class SecondPage {
+export class SecondPage {
   constructor(public navCtrl: NavController) {}
 
   insertPage() {
@@ -58,14 +58,32 @@ class SecondPage {
     </ion-content>
   `
 })
-class InsertPage {}
+export class InsertPage {}
 
 
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`
 })
-class E2EApp {
+export class E2EApp {
   root = FirstPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    FirstPage,
+    SecondPage,
+    InsertPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    FirstPage,
+    SecondPage,
+    InsertPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/nav/test/memory/index.ts b/src/components/nav/test/memory/app-module.ts
similarity index 68%
rename from src/components/nav/test/memory/index.ts
rename to src/components/nav/test/memory/app-module.ts
index 83d2460619..6401521b55 100644
--- a/src/components/nav/test/memory/index.ts
+++ b/src/components/nav/test/memory/app-module.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, NavController } from '../../../..';
 
 
 let delay = 100;
@@ -15,20 +15,20 @@ let count = 0;
     </ion-content>
   `
 })
-class Page1 {
+export class Page1 {
   tmr: number;
 
   constructor(private nav: NavController) {}
 
   play() {
-    this.tmr = setTimeout(() => {
+    this.tmr = (<any>setTimeout(() => {
       count++;
       console.log('push', count);
 
       this.nav.push(Page2, null, {
         animate: animate
       });
-    }, delay);
+    }, delay));
   }
 
   ionViewDidEnter() {
@@ -49,20 +49,20 @@ class Page1 {
     </ion-content>
   `
 })
-class Page2 {
+export class Page2 {
   tmr: number;
 
   constructor(public navCtrl: NavController) {}
 
   play() {
-    this.tmr = setTimeout(() => {
+    this.tmr = (<any>setTimeout(() => {
       count++;
       console.log('pop', count);
 
       this.navCtrl.pop({
         animate: animate
       });
-    }, delay);
+    }, delay));
   }
 
   ionViewDidEnter() {
@@ -74,12 +74,27 @@ class Page2 {
   }
 }
 
-
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`
 })
-class E2EApp {
+export class E2EApp {
   root = Page1;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1,
+    Page2
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1,
+    Page2
+  ]
+})
+export class AppModule {}
diff --git a/src/components/nav/test/nav-controller.spec.ts b/src/components/nav/test/nav-controller.spec.ts
deleted file mode 100644
index bd0d55a908..0000000000
--- a/src/components/nav/test/nav-controller.spec.ts
+++ /dev/null
@@ -1,1616 +0,0 @@
-import { Renderer } from '@angular/core';
-import { App, Config, Form, Keyboard, MenuController, NavOptions, Platform, Tabs, ViewController } from '../../../../src';
-import { NavControllerBase } from '../../../../src/components/nav/nav-controller-base';
-import { STATE_ACTIVE, STATE_INACTIVE, STATE_INIT_ENTER, STATE_INIT_LEAVE, STATE_TRANS_ENTER, STATE_TRANS_LEAVE, STATE_REMOVE, STATE_REMOVE_AFTER_TRANS, STATE_CANCEL_ENTER, STATE_FORCE_ACTIVE } from '../../../../src/components/nav/nav-controller-base';
-import { mockNavController, mockElementRef, mockTransition } from '../../../../src/util/mock-providers';
-
-export function run() {
-
-describe('NavController', () => {
-
-  describe('pop', () => {
-
-    it('should do nothing if its the first view in the stack', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_ACTIVE;
-      nav._views = [view1];
-
-      expect(nav.length()).toBe(1);
-
-      nav.pop();
-
-      expect(nav.length()).toBe(1);
-      expect(nav.getByIndex(0).state).toBe(STATE_ACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-    });
-
-  });
-
-  describe('popToRoot', () => {
-
-    it('should go back to root', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      let view4 = new ViewController(Page4);
-      view4.state = STATE_ACTIVE;
-      nav._views = [view1, view2, view3, view4];
-
-      nav.popToRoot();
-      expect(nav.length()).toBe(2);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page4);
-
-      expect(view2.state).toBe(STATE_REMOVE);
-      expect(view3.state).toBe(STATE_REMOVE);
-    });
-
-  });
-
-  describe('popTo', () => {
-
-    it('should go back two views', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      let view4 = new ViewController(Page4);
-      view4.state = STATE_ACTIVE;
-      nav._views = [view1, view2, view3, view4];
-
-      nav.popTo(view2);
-
-      expect(nav.length()).toBe(3);
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(view3.state).toBe(STATE_REMOVE);
-      expect(nav.getByIndex(2).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(2).componentType).toBe(Page4);
-    });
-
-  });
-
-  describe('remove', () => {
-
-    it('should create opts if passed in arg is undefined or null', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_ACTIVE;
-      nav._views = [view1, view2];
-
-      nav.remove(1, 1, null);
-    });
-
-  });
-
-  describe('_remove', () => {
-
-    it('should reassign activily transitioning leave that isnt getting removed, to become force active', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_TRANS_LEAVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_TRANS_ENTER;
-      nav._views = [view1, view2, view3];
-
-      nav._remove(2, 1);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_FORCE_ACTIVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_REMOVE_AFTER_TRANS);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-    });
-
-    it('should reassign activily transitioning views that should be removed to STATE_REMOVE_AFTER_TRANS', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_TRANS_ENTER;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_TRANS_LEAVE;
-      nav._views = [view1, view2, view3];
-
-      nav._remove(1, 2);
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_REMOVE_AFTER_TRANS);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_REMOVE_AFTER_TRANS);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-    });
-
-    it('should keep same init leave, but set previous init enter to inactive', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INIT_ENTER;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INIT_LEAVE;
-      nav._views = [view1, view2, view3];
-
-      nav._remove(1, 1);
-      expect(nav.length()).toBe(3);
-      expect(view1.state).toBe(STATE_INIT_ENTER);
-      expect(view2.state).toBe(STATE_CANCEL_ENTER);
-      expect(view3.state).toBe(STATE_INIT_LEAVE);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_CANCEL_ENTER);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-    });
-
-    it('should set to pop the active and enter the previous', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_ACTIVE;
-      nav._views = [view1, view2];
-
-      nav._remove(1, 1);
-      expect(view1.state).toBe(STATE_INIT_ENTER);
-      expect(view2.state).toBe(STATE_INIT_LEAVE);
-    });
-
-    it('should set to remove 2 views before active one, active stays the same', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      let view4 = new ViewController(Page4);
-      view4.state = STATE_INACTIVE;
-      let view5 = new ViewController(Page5);
-      view5.state = STATE_ACTIVE;
-      nav._views = [view1, view2, view3, view4, view5];
-
-      nav._remove(2, 2);
-      expect(nav.length()).toBe(3);
-      expect(view1.state).toBe(STATE_INACTIVE);
-      expect(view2.state).toBe(STATE_INACTIVE);
-      expect(view3.state).toBe(STATE_REMOVE);
-      expect(view4.state).toBe(STATE_REMOVE);
-      expect(view5.state).toBe(STATE_ACTIVE);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_ACTIVE);
-      expect(nav.getByIndex(2).componentType).toBe(Page5);
-    });
-
-    it('should set to remove all views other than the first', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      let view4 = new ViewController(Page4);
-      view4.state = STATE_ACTIVE;
-      nav._views = [view1, view2, view3, view4];
-
-      nav._remove(1, 9999);
-      expect(nav.length()).toBe(2);
-      expect(view1.state).toBe(STATE_INIT_ENTER);
-      expect(view2.state).toBe(STATE_REMOVE);
-      expect(view3.state).toBe(STATE_REMOVE);
-      expect(view4.state).toBe(STATE_INIT_LEAVE);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page4);
-    });
-
-    it('should set to remove 3 views and enter the first inactive one, remove includes active one', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      let view4 = new ViewController(Page4);
-      view4.state = STATE_ACTIVE;
-      nav._views = [view1, view2, view3, view4];
-
-      nav._remove(1, 3);
-      expect(nav.length()).toBe(2);
-      expect(view1.state).toBe(STATE_INIT_ENTER);
-      expect(view2.state).toBe(STATE_REMOVE);
-      expect(view3.state).toBe(STATE_REMOVE);
-      expect(view4.state).toBe(STATE_INIT_LEAVE);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page4);
-    });
-
-    it('should set to remove the active and enter the previous', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_ACTIVE;
-      nav._views = [view1, view2];
-
-      nav._remove(1, 1);
-      expect(view1.state).toBe(STATE_INIT_ENTER);
-      expect(view2.state).toBe(STATE_INIT_LEAVE);
-    });
-
-    it('should set to remove the only view in the stack', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_ACTIVE;
-      nav._views = [view1];
-
-      nav._remove(0, 1);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE);
-    });
-
-    it('should call willLeave/didLeave/destroy on views with STATE_REMOVE', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      let view4 = new ViewController(Page4);
-      view4.state = STATE_ACTIVE;
-      nav._views = [view1, view2, view3, view4];
-
-      spyOn(view1, 'fireWillLeave');
-      spyOn(view1, 'fireDidLeave');
-      spyOn(view1, 'destroy');
-
-      spyOn(view2, 'fireWillLeave');
-      spyOn(view2, 'fireDidLeave');
-      spyOn(view2, 'destroy');
-
-      spyOn(view3, 'fireWillLeave');
-      spyOn(view3, 'fireDidLeave');
-      spyOn(view3, 'destroy');
-
-      spyOn(view4, 'fireWillLeave');
-      spyOn(view4, 'fireDidLeave');
-      spyOn(view4, 'destroy');
-
-      nav._remove(1, 3);
-      expect(nav.length()).toBe(2);
-      expect(view1.state).toBe(STATE_INIT_ENTER);
-      expect(view2.state).toBe(STATE_REMOVE);
-      expect(view3.state).toBe(STATE_REMOVE);
-      expect(view4.state).toBe(STATE_INIT_LEAVE);
-
-      expect(view1.fireWillLeave).not.toHaveBeenCalled();
-      expect(view1.fireDidLeave).not.toHaveBeenCalled();
-      expect(view1.destroy).not.toHaveBeenCalled();
-
-      expect(view2.fireWillLeave).toHaveBeenCalled();
-      expect(view2.fireDidLeave).toHaveBeenCalled();
-      expect(view2.destroy).toHaveBeenCalled();
-
-      expect(view3.fireWillLeave).toHaveBeenCalled();
-      expect(view3.fireDidLeave).toHaveBeenCalled();
-      expect(view3.destroy).toHaveBeenCalled();
-
-      expect(view4.fireWillLeave).not.toHaveBeenCalled();
-      expect(view4.fireDidLeave).not.toHaveBeenCalled();
-      expect(view4.destroy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('_cleanup', () => {
-    it('should destroy views that are inactive after the active view', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_ACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      let view4 = new ViewController(Page4);
-      view4.state = STATE_TRANS_ENTER;
-      let view5 = new ViewController(Page5);
-      view5.state = STATE_INACTIVE;
-      nav._views = [view1, view2, view3, view4, view5];
-      nav._cleanup();
-
-      expect(nav.length()).toBe(3);
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_ACTIVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_TRANS_ENTER);
-      expect(nav.getByIndex(2).componentType).toBe(Page4);
-    });
-
-    it('should not destroy any views since the last is active', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_ACTIVE;
-      nav._views = [view1, view2];
-      nav._cleanup();
-      expect(nav.length()).toBe(2);
-    });
-
-    it('should call destroy for each view to be destroyed', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_ACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INACTIVE;
-      let view3 = new ViewController(Page3);
-      view3.state = STATE_INACTIVE;
-      nav._views = [view1, view2, view3];
-
-      spyOn(view1, 'destroy');
-      spyOn(view2, 'destroy');
-      spyOn(view3, 'destroy');
-
-      nav._cleanup();
-
-      expect(nav.length()).toBe(1);
-      expect(view1.destroy).not.toHaveBeenCalled();
-      expect(view2.destroy).toHaveBeenCalled();
-      expect(view3.destroy).toHaveBeenCalled();
-    });
-
-    it('should reset zIndexes if their is a negative zindex', () => {
-      let view1 = new ViewController(Page1);
-      view1.setPageRef( mockElementRef() );
-      view1.state = STATE_INACTIVE;
-      view1.zIndex = -1;
-
-      let view2 = new ViewController(Page2);
-      view2.setPageRef( mockElementRef() );
-      view2.state = STATE_INACTIVE;
-      view2.zIndex = 0;
-
-      let view3 = new ViewController(Page3);
-      view3.setPageRef( mockElementRef() );
-      view3.state = STATE_ACTIVE;
-      view3.zIndex = 1;
-
-      nav._views = [view1, view2, view3];
-      nav._cleanup();
-
-      expect(view1.zIndex).toEqual(100);
-      expect(view2.zIndex).toEqual(101);
-      expect(view3.zIndex).toEqual(102);
-    });
-  });
-
-  describe('_postRender', () => {
-    it('should immediately call done when enteringView state is inactive', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      var wasCalled = false;
-      var done = () => {
-        wasCalled = true;
-      };
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      nav._postRender(1, view1, null, false, null, done);
-
-      expect(wasCalled).toBe(true);
-    });
-
-    it('should call willEnter on entering view', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      var navOptions: NavOptions = {};
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      spyOn(enteringView, 'fireWillEnter');
-
-      nav._postRender(1, enteringView, leavingView, false, navOptions, done);
-
-      expect(enteringView.fireWillEnter).toHaveBeenCalled();
-    });
-
-    it('should not call willEnter on entering view when it is being preloaded', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      var navOptions: NavOptions = {
-        preload: true
-      };
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      spyOn(enteringView, 'fireWillEnter');
-
-      nav._postRender(1, enteringView, leavingView, false, navOptions, done);
-
-      expect(enteringView.fireWillEnter).not.toHaveBeenCalled();
-    });
-
-    it('should call willLeave on leaving view', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      var navOptions: NavOptions = {};
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      spyOn(leavingView, 'fireWillLeave');
-
-      nav._postRender(1, enteringView, leavingView, false, navOptions, done);
-
-      expect(leavingView.fireWillLeave).toHaveBeenCalled();
-    });
-
-    it('should not call willEnter when the leaving view has fireOtherLifecycles not true', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      var navOptions: NavOptions = {};
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      spyOn(enteringView, 'fireWillEnter');
-      spyOn(leavingView, 'fireWillLeave');
-
-      leavingView.fireOtherLifecycles = false;
-
-      nav._postRender(1, enteringView, leavingView, false, navOptions, done);
-
-      expect(enteringView.fireWillEnter).not.toHaveBeenCalled();
-      expect(leavingView.fireWillLeave).toHaveBeenCalled();
-    });
-
-    it('should not call willLeave when the entering view has fireOtherLifecycles not true', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      var navOptions: NavOptions = {};
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      spyOn(enteringView, 'fireWillEnter');
-      spyOn(leavingView, 'fireWillLeave');
-
-      enteringView.fireOtherLifecycles = false;
-
-      nav._postRender(1, enteringView, leavingView, false, navOptions, done);
-
-      expect(enteringView.fireWillEnter).toHaveBeenCalled();
-      expect(leavingView.fireWillLeave).not.toHaveBeenCalled();
-    });
-
-    it('should not call willLeave on leaving view when it is being preloaded', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      var navOptions: NavOptions = {
-        preload: true
-      };
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      spyOn(leavingView, 'fireWillLeave');
-
-      nav._postRender(1, enteringView, leavingView, false, navOptions, done);
-
-      expect(leavingView.fireWillLeave).not.toHaveBeenCalled();
-    });
-
-    it('should set animate false when preloading', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      var navOptions: NavOptions = {
-        preload: true
-      };
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-
-      nav._postRender(1, enteringView, leavingView, false, navOptions, done);
-
-      expect(navOptions.animate).toBe(false);
-    });
-
-    it('should set domShow true when isAlreadyTransitioning', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      let isAlreadyTransitioning = true;
-      var navOptions: NavOptions = {};
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-      nav._renderer = null;
-
-      spyOn(enteringView, 'domShow');
-      spyOn(leavingView, 'domShow');
-
-      nav._postRender(1, enteringView, leavingView, isAlreadyTransitioning, navOptions, done);
-
-      expect(enteringView.domShow).toHaveBeenCalledWith(true, nav._renderer);
-      expect(leavingView.domShow).toHaveBeenCalledWith(true, nav._renderer);
-    });
-
-    it('should set domShow true when isAlreadyTransitioning false for the entering/leaving views', () => {
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-      let view3 = new ViewController(Page3);
-      let isAlreadyTransitioning = false;
-      var navOptions: NavOptions = {};
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-      nav._renderer = null;
-      nav._views = [view1, view2, view3];
-
-      spyOn(view1, 'domShow');
-      spyOn(view2, 'domShow');
-      spyOn(view3, 'domShow');
-
-      nav._postRender(1, view3, view2, isAlreadyTransitioning, navOptions, done);
-
-      expect(view1.domShow).toHaveBeenCalledWith(false, nav._renderer);
-      expect(view2.domShow).toHaveBeenCalledWith(true, nav._renderer);
-      expect(view3.domShow).toHaveBeenCalledWith(true, nav._renderer);
-    });
-
-    it('should set domShow true when isAlreadyTransitioning false for views when nav is a portal', () => {
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-      let view3 = new ViewController(Page3);
-      let view4 = new ViewController(Page4);
-      let isAlreadyTransitioning = false;
-      var navOptions: NavOptions = {};
-      var done = () => {};
-      nav._beforeTrans = () => {}; // prevent running beforeTrans for tests
-      nav._renderer = null;
-      nav._views = [view1, view2, view3, view4];
-
-      nav._isPortal = true;
-
-      spyOn(view1, 'domShow');
-      spyOn(view2, 'domShow');
-      spyOn(view3, 'domShow');
-      spyOn(view4, 'domShow');
-
-      nav._postRender(1, view4, view3, isAlreadyTransitioning, navOptions, done);
-
-      expect(view1.domShow).toHaveBeenCalledWith(true, nav._renderer);
-      expect(view2.domShow).toHaveBeenCalledWith(true, nav._renderer);
-      expect(view3.domShow).toHaveBeenCalledWith(true, nav._renderer);
-      expect(view4.domShow).toHaveBeenCalledWith(true, nav._renderer);
-    });
-
-  });
-
-  describe('_setZIndex', () => {
-
-    it('should set zIndex off of the previous view to the entering view is loaded and the leavingView is not loaded', () => {
-      let leavingView = new ViewController();
-      leavingView.zIndex = 100;
-      leavingView.fireLoaded();
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-
-      nav._views = [leavingView, enteringView];
-
-      nav._setZIndex(enteringView, leavingView, 'forward');
-      expect(enteringView.zIndex).toEqual(101);
-    });
-
-    it('should set zIndex 100 when leaving view is not loaded', () => {
-      let leavingView = new ViewController();
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-
-      nav._views = [leavingView, enteringView];
-
-      nav._setZIndex(enteringView, leavingView, 'forward');
-      expect(enteringView.zIndex).toEqual(100);
-    });
-
-    it('should set zIndex 100 on first entering view', () => {
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-      nav._setZIndex(enteringView, null, 'forward');
-      expect(enteringView.zIndex).toEqual(100);
-    });
-
-    it('should set zIndex 1 on second entering view', () => {
-      let leavingView = new ViewController();
-      leavingView.zIndex = 0;
-      leavingView.fireLoaded();
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-      nav._setZIndex(enteringView, leavingView, 'forward');
-      expect(enteringView.zIndex).toEqual(1);
-    });
-
-    it('should set zIndex 0 on entering view going back', () => {
-      let leavingView = new ViewController();
-      leavingView.zIndex = 1;
-      leavingView.fireLoaded();
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-      nav._setZIndex(enteringView, leavingView, 'back');
-      expect(enteringView.zIndex).toEqual(0);
-    });
-
-    it('should set zIndex 9999 on first entering portal view', () => {
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-      nav._isPortal = true;
-      nav._setZIndex(enteringView, null, 'forward');
-      expect(enteringView.zIndex).toEqual(9999);
-    });
-
-    it('should set zIndex 10000 on second entering portal view', () => {
-      let leavingView = new ViewController();
-      leavingView.zIndex = 9999;
-      leavingView.fireLoaded();
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-      nav._isPortal = true;
-      nav._setZIndex(enteringView, leavingView, 'forward');
-      expect(enteringView.zIndex).toEqual(10000);
-    });
-
-    it('should set zIndex 9999 on entering portal view going back', () => {
-      let leavingView = new ViewController();
-      leavingView.zIndex = 10000;
-      leavingView.fireLoaded();
-      let enteringView = new ViewController();
-      enteringView.setPageRef(mockElementRef());
-      nav._isPortal = true;
-      nav._setZIndex(enteringView, leavingView, 'back');
-      expect(enteringView.zIndex).toEqual(9999);
-    });
-
-  });
-
-  describe('_setAnimate', () => {
-
-    it('should be unchanged when the nav is a portal', () => {
-      nav._views = [new ViewController()];
-      nav._init = false;
-      nav._isPortal = true;
-      let opts: NavOptions = {};
-      nav._setAnimate(opts);
-      expect(opts.animate).toBeUndefined();
-    });
-
-    it('should not animate when theres only 1 view, and nav hasnt initialized yet', () => {
-      nav._views = [new ViewController()];
-      nav._init = false;
-      let opts: NavOptions = {};
-      nav._setAnimate(opts);
-      expect(opts.animate).toEqual(false);
-    });
-
-    it('should be unchanged when theres only 1 view, and nav has already initialized', () => {
-      nav._views = [new ViewController()];
-      nav._init = true;
-      let opts: NavOptions = {};
-      nav._setAnimate(opts);
-      expect(opts.animate).toBeUndefined();
-    });
-
-    it('should not animate with config animate = false, and has initialized', () => {
-      nav.config.set('animate', false);
-      nav._init = true;
-      let opts: NavOptions = {};
-      nav._setAnimate(opts);
-      expect(opts.animate).toEqual(false);
-    });
-
-    it('should not animate with config animate = false, and has not initialized', () => {
-      nav.config.set('animate', false);
-      nav._init = false;
-      let opts: NavOptions = {};
-      nav._setAnimate(opts);
-      expect(opts.animate).toEqual(false);
-    });
-
-  });
-
-  describe('_afterTrans', () => {
-
-    it('should call didEnter/didLeave', () => {
-      let enteringView = new ViewController();
-      let leavingView = new ViewController();
-      let navOpts: NavOptions = {};
-      let hasCompleted = true;
-      let doneCalled = false;
-      let done = () => {doneCalled = true; };
-
-      spyOn(enteringView, 'fireDidEnter');
-      spyOn(leavingView, 'fireDidLeave');
-
-      nav._init = true;
-      nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
-
-      expect(enteringView.fireDidEnter).toHaveBeenCalled();
-      expect(leavingView.fireDidLeave).toHaveBeenCalled();
-      expect(doneCalled).toBe(true);
-    });
-
-    it('should not call didEnter/didLeave when preloaded', () => {
-      let enteringView = new ViewController();
-      let leavingView = new ViewController();
-      let navOpts: NavOptions = {
-        preload: true
-      };
-      let hasCompleted = true;
-      let doneCalled = false;
-      let done = () => {doneCalled = true; };
-
-      spyOn(enteringView, 'fireDidEnter');
-      spyOn(leavingView, 'fireDidLeave');
-
-      nav._init = true;
-      nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
-
-      expect(enteringView.fireDidEnter).not.toHaveBeenCalled();
-      expect(leavingView.fireDidLeave).not.toHaveBeenCalled();
-      expect(doneCalled).toBe(true);
-    });
-
-    it('should not call didLeave when enteringView set fireOtherLifecycles to false', () => {
-      let enteringView = new ViewController();
-      let leavingView = new ViewController();
-      let navOpts: NavOptions = {};
-      let hasCompleted = true;
-      let doneCalled = false;
-      let done = () => {doneCalled = true; };
-
-      enteringView.fireOtherLifecycles = false;
-
-      spyOn(enteringView, 'fireDidEnter');
-      spyOn(leavingView, 'fireDidLeave');
-
-      nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
-
-      expect(enteringView.fireDidEnter).toHaveBeenCalled();
-      expect(leavingView.fireDidLeave).not.toHaveBeenCalled();
-      expect(doneCalled).toBe(true);
-    });
-
-    it('should not call didEnter when leavingView set fireOtherLifecycles to false', () => {
-      let enteringView = new ViewController();
-      let leavingView = new ViewController();
-      let navOpts: NavOptions = {};
-      let hasCompleted = true;
-      let doneCalled = false;
-      let done = () => {doneCalled = true; };
-
-      leavingView.fireOtherLifecycles = false;
-
-      spyOn(enteringView, 'fireDidEnter');
-      spyOn(leavingView, 'fireDidLeave');
-
-      nav._init = true;
-      nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
-
-      expect(enteringView.fireDidEnter).not.toHaveBeenCalled();
-      expect(leavingView.fireDidLeave).toHaveBeenCalled();
-      expect(doneCalled).toBe(true);
-    });
-
-    it('should not call didEnter/didLeave when not hasCompleted', () => {
-      let enteringView = new ViewController();
-      let leavingView = new ViewController();
-      let navOpts: NavOptions = {};
-      let hasCompleted = false;
-      let doneCalled = false;
-      let done = () => {doneCalled = true; };
-
-      spyOn(enteringView, 'fireDidEnter');
-      spyOn(leavingView, 'fireDidLeave');
-
-      nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
-
-      expect(enteringView.fireDidEnter).not.toHaveBeenCalled();
-      expect(leavingView.fireDidLeave).not.toHaveBeenCalled();
-      expect(doneCalled).toBe(true);
-    });
-
-  });
-
-  describe('_transFinish', () => {
-
-    it('should remove entering view if it was already set to cancel', () => {
-      let enteringView = new ViewController(Page1);
-      let leavingView = new ViewController(Page2);
-      enteringView.state = STATE_CANCEL_ENTER;
-      let direction = 'foward';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      spyOn(nav, 'remove');
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(nav.remove).toHaveBeenCalled();
-      expect(enteringView.state).toBe(STATE_CANCEL_ENTER);
-    });
-
-    it('should not entering/leaving state, after transition that isnt the most recent, and state already changed', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = 234234;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = 234234;
-      let direction = 'foward';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      nav._transIds = 2;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(enteringView.state).toBe(234234);
-      expect(leavingView.state).toBe(234234);
-    });
-
-    it('should set entering/leaving to inactive, after transition that isnt the most recent', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'foward';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      nav._transIds = 2;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(enteringView.state).toBe(STATE_INACTIVE);
-      expect(leavingView.state).toBe(STATE_INACTIVE);
-    });
-
-    it('should set entering active, leaving inactive, after transition', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'foward';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      nav._transIds = 1;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(enteringView.state).toBe(STATE_ACTIVE);
-      expect(leavingView.state).toBe(STATE_INACTIVE);
-    });
-
-    it('should set entering inactive, leaving active, after transition has not completed', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'back';
-      let updateUrl = false;
-      let hasCompleted = false;
-
-      nav._transIds = 1;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(enteringView.state).toBe(STATE_INACTIVE);
-      expect(leavingView.state).toBe(STATE_ACTIVE);
-    });
-
-    it('should run cleanup when most recent transition and has completed', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'back';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      spyOn(nav, '_cleanup');
-
-      nav._transIds = 1;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(nav._cleanup).toHaveBeenCalled();
-    });
-
-    it('should not run cleanup when most not recent transition', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'back';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      spyOn(nav, '_cleanup');
-
-      nav._transIds = 1;
-
-      nav._transFinish(2, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(nav._cleanup).not.toHaveBeenCalled();
-    });
-
-    it('should not run cleanup when it hasnt completed transition, but is the most recent', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'back';
-      let updateUrl = false;
-      let hasCompleted = false;
-
-      spyOn(nav, '_cleanup');
-
-      nav._transIds = 1;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(nav._cleanup).not.toHaveBeenCalled();
-    });
-
-    it('should set transitioning is over when most recent transition finishes', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'back';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      spyOn(nav, 'setTransitioning');
-
-      nav._transIds = 1;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(nav.setTransitioning).toHaveBeenCalledWith(false);
-    });
-
-    it('should set transitioning is not over if its not the most recent transition', () => {
-      let enteringView = new ViewController(Page1);
-      enteringView.state = STATE_TRANS_ENTER;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = STATE_TRANS_LEAVE;
-      let direction = 'back';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      spyOn(nav, 'setTransitioning');
-
-      nav._transIds = 2;
-
-      nav._transFinish(1, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      expect(nav.setTransitioning).not.toHaveBeenCalled();
-    });
-
-    it('should re-enable the app when transition time <= 0', () => {
-      // arrange
-      let enteringView = new ViewController(Page1);
-      enteringView.state = 234234;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = 234234;
-      nav._transIds = 1;
-
-      let direction = 'forward';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      spyOn(nav._app, 'setEnabled');
-      spyOn(nav, 'setTransitioning');
-
-      // act
-      nav._transFinish(nav._transIds, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      // assert
-      expect(nav._app.setEnabled).toHaveBeenCalledWith(true);
-      expect(nav.setTransitioning).toHaveBeenCalledWith(false);
-    });
-
-    it('should not re-enable app when transition time > 0', () => {
-      // arrange
-      let enteringView = new ViewController(Page1);
-      enteringView.state = 235234;
-      let leavingView = new ViewController(Page2);
-      leavingView.state = 235234;
-      nav._transIds = 1;
-
-      let direction = 'forward';
-      let updateUrl = false;
-      let hasCompleted = true;
-
-      spyOn(nav._app, 'setEnabled');
-      spyOn(nav, 'setTransitioning');
-
-      nav.getLongestTrans = () => { return 50; };
-
-      // act
-      nav._transFinish(nav._transIds, enteringView, leavingView, direction, updateUrl, hasCompleted);
-
-      // assert
-      expect(nav._app.setEnabled).not.toHaveBeenCalled();
-      expect(nav.setTransitioning).toHaveBeenCalledWith(false);
-    });
-
-  });
-
-  describe('_insert', () => {
-
-    it('should push page when previous transition is still actively transitioning', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_TRANS_ENTER;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_TRANS_LEAVE;
-      nav._views = [view1, view2];
-
-      let view3 = new ViewController(Page3);
-      nav._insert(-1, [view3]);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_TRANS_ENTER);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_TRANS_LEAVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-    });
-
-    it('should push page when previous transition views init, but havent transitioned yet', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INIT_LEAVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INIT_ENTER;
-      nav._views = [view1, view2];
-
-      let view3 = new ViewController(Page3);
-      nav._insert(-1, [view3]);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-    });
-
-    it('should insert multiple pages, back to back, with a starting active page', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_ACTIVE;
-      nav._views = [view1];
-
-      let view2 = new ViewController(Page2);
-      nav._insert(-1, [view2]);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-
-      let view3 = new ViewController(Page3);
-      nav._insert(-1, [view3]);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-    });
-
-    it('should insert multiple pages, back to back, no starting active page', () => {
-      let view1 = new ViewController(Page1);
-      nav._insert(-1, [view1]);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-
-      let view2 = new ViewController(Page2);
-      nav._insert(-1, [view2]);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-
-      let view3 = new ViewController(Page3);
-      nav._insert(1, [view3]);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(1).componentType).toBe(Page3);
-      expect(nav.getByIndex(2).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(2).componentType).toBe(Page2);
-    });
-
-    it('should push a page, and abort previous init', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INIT_LEAVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INIT_ENTER;
-      nav._views = [view1, view2];
-
-      let view3 = new ViewController(Page3);
-      nav._insert(-1, [view3]);
-      expect(nav.length()).toBe(3);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-    });
-
-    it('should insert a page between the first and second', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_ACTIVE;
-      nav._views = [view1, view2];
-
-      let view3 = new ViewController(Page3);
-      nav._insert(1, [view3]);
-      expect(nav.length()).toBe(3);
-
-      expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(1).componentType).toBe(Page3);
-      expect(nav.getByIndex(2).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(2).componentType).toBe(Page2);
-    });
-
-    it('should insert a page before the first', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_ACTIVE;
-      nav._views = [view1];
-
-      let view2 = new ViewController(Page2);
-      nav._insert(0, [view2]);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(0).componentType).toBe(Page2);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page1);
-    });
-
-    it('should insert 3 pages', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_ACTIVE;
-      nav._views = [view1];
-
-      let insertViews = [
-        new ViewController(Page2),
-        new ViewController(Page3),
-        new ViewController(Page4)
-      ];
-      nav._insert(-1, insertViews);
-      expect(nav.length()).toBe(4);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-      expect(nav.getByIndex(2).state).toBe(STATE_INACTIVE);
-      expect(nav.getByIndex(2).componentType).toBe(Page3);
-      expect(nav.getByIndex(3).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(3).componentType).toBe(Page4);
-    });
-
-    it('should push the second page', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_ACTIVE;
-      nav._views = [view1];
-
-      let view2 = new ViewController(Page2);
-      nav._insert(-1, [view2]);
-      expect(nav.length()).toBe(2);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE);
-      expect(nav.getByIndex(0).componentType).toBe(Page1);
-      expect(nav.getByIndex(1).state).toBe(STATE_INIT_ENTER);
-      expect(nav.getByIndex(1).componentType).toBe(Page2);
-    });
-
-    it('should push the first page, using a number greater than the length', () => {
-      let view1 = new ViewController(Page1);
-      nav._insert(8675309, [view1]);
-
-      expect(nav.length()).toBe(1);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-    });
-
-    it('should push the first page, using -1', () => {
-      let view1 = new ViewController(Page1);
-      nav._insert(-1, [view1]);
-
-      expect(nav.getByIndex(0).id).toBeDefined();
-      expect(nav.length()).toBe(1);
-      expect(nav.getByIndex(0).state).toBe(STATE_INIT_ENTER);
-    });
-
-  });
-
-  describe('getActive', () => {
-    it('should getActive()', () => {
-      expect(nav.getActive()).toBe(null);
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INIT_ENTER;
-      nav._views = [view1];
-      expect(nav.getActive()).toBe(null);
-      view1.state = STATE_ACTIVE;
-      expect(nav.getActive()).toBe(view1);
-    });
-  });
-
-  describe('getByState', () => {
-    it('should getByState()', () => {
-      expect(nav.getByState(null)).toBe(null);
-
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INIT_ENTER;
-      let view2 = new ViewController(Page2);
-      view2.state = STATE_INIT_ENTER;
-      nav._views = [view1, view2];
-
-      expect(nav.getByState(8675309)).toBe(null);
-      expect(nav.getByState(STATE_INIT_ENTER)).toBe(view2);
-
-      view2.state = STATE_INACTIVE;
-      expect(nav.getByState(STATE_INIT_ENTER)).toBe(view1);
-
-      view2.state = STATE_ACTIVE;
-      expect(nav.getActive()).toBe(view2);
-    });
-  });
-
-  describe('getPrevious', () => {
-    it('should getPrevious()', () => {
-      expect(nav.getPrevious(null)).toBe(null);
-
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-      nav._views = [view1, view2];
-
-      expect(nav.getPrevious(view1)).toBe(null);
-      expect(nav.getPrevious(view2)).toBe(view1);
-    });
-  });
-
-  describe('first', () => {
-    it('should get first()', () => {
-      expect(nav.first()).toBe(null);
-      let view1 = new ViewController(Page1);
-      view1.setNav(nav);
-      let view2 = new ViewController(Page2);
-      view2.setNav(nav);
-      nav._views = [view1];
-
-      expect(nav.first()).toBe(view1);
-      expect(view1.isFirst()).toBe(true);
-
-      nav._views = [view1, view2];
-      expect(nav.first()).toBe(view1);
-      expect(view1.isFirst()).toBe(true);
-      expect(view2.isFirst()).toBe(false);
-    });
-  });
-
-  describe('last', () => {
-    it('should get last()', () => {
-      expect(nav.last()).toBe(null);
-      let view1 = new ViewController(Page1);
-      view1.setNav(nav);
-      let view2 = new ViewController(Page2);
-      view2.setNav(nav);
-      nav._views = [view1];
-
-      expect(nav.last()).toBe(view1);
-      expect(view1.isLast()).toBe(true);
-
-      nav._views = [view1, view2];
-      expect(nav.last()).toBe(view2);
-      expect(view1.isLast()).toBe(false);
-      expect(view2.isLast()).toBe(true);
-    });
-  });
-
-  describe('indexOf', () => {
-    it('should get indexOf()', () => {
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-
-      expect(nav.length()).toBe(0);
-      expect(nav.indexOf(view1)).toBe(-1);
-
-      nav._views = [view1, view2];
-      expect(nav.indexOf(view1)).toBe(0);
-      expect(nav.indexOf(view2)).toBe(1);
-      expect(nav.length()).toBe(2);
-    });
-  });
-
-  describe('getByIndex', () => {
-    it('should get getByIndex()', () => {
-      expect(nav.getByIndex(-99)).toBe(null);
-      expect(nav.getByIndex(99)).toBe(null);
-
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-      nav._views = [view1, view2];
-
-      expect(nav.getByIndex(-1)).toBe(null);
-      expect(nav.getByIndex(0)).toBe(view1);
-      expect(nav.getByIndex(1)).toBe(view2);
-      expect(nav.getByIndex(2)).toBe(null);
-    });
-  });
-
-  /* private method */
-  describe('_beforeTrans', () => {
-
-    it('shouldnt disable app on short transition', () => {
-      // arrange
-      let executeAssertions = () => {
-        // assertions triggerd by callbacks
-        expect(nav._app.setEnabled).toHaveBeenCalledWith(true, 50);
-        expect(nav.setTransitioning).toHaveBeenCalledWith(false, 50);
-      };
-      nav._createTrans = mockTransition(executeAssertions, 50);
-
-      spyOn(nav._app, 'setEnabled');
-      spyOn(nav, 'setTransitioning');
-
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-
-      // act
-      nav._beforeTrans(view1, view2, {}, () => {});
-    });
-
-    it('should disable app on longer transition', () => {
-      // arrange
-      let executeAssertions = () => {
-        // assertions triggerd by callbacks
-        expect(nav._app.setEnabled).toHaveBeenCalledWith(false, 200);
-        expect(nav.setTransitioning).toHaveBeenCalledWith(true, 200);
-      };
-
-      nav._createTrans = mockTransition(executeAssertions, 200);
-
-      spyOn(nav._app, 'setEnabled');
-      spyOn(nav, 'setTransitioning');
-
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-
-      // act
-      nav._beforeTrans(view1, view2, {}, () => {});
-    });
-
-    it('should disable app w/ padding when keyboard is open', () => {
-      // arrange
-      let executeAssertions = () => {
-        // assertions triggerd by callbacks
-        expect(nav._app.setEnabled.calls.mostRecent().args[0]).toEqual(false);
-        expect(nav._app.setEnabled.calls.mostRecent().args[1]).toBeGreaterThan(200);
-
-        expect(nav.setTransitioning.calls.mostRecent().args[0]).toEqual(true);
-        expect(nav.setTransitioning.calls.mostRecent().args[1]).toBeGreaterThan(200);
-      };
-
-      nav._createTrans = mockTransition(executeAssertions, 200);
-
-      nav._keyboard.isOpen = () => true;
-
-      spyOn(nav._app, 'setEnabled');
-      spyOn(nav, 'setTransitioning');
-
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-
-      // act
-      nav._beforeTrans(view1, view2, {}, () => {});
-    });
-
-    it('shouldnt update app enabled when parent transition is occurring', () => {
-      // arrange
-      let executeAssertions = () => {
-        // assertions triggerd by callbacks
-        expect(nav._app.setEnabled).not.toHaveBeenCalled();
-        expect(nav.setTransitioning.calls.mostRecent().args[0]).toEqual(true);
-      };
-
-      nav._createTrans = mockTransition(executeAssertions, 200);
-
-      spyOn(nav._app, 'setEnabled');
-      spyOn(nav, 'setTransitioning');
-
-      nav.getLongestTrans = () => { return Date.now() + 100; };
-
-      let view1 = new ViewController(Page1);
-      let view2 = new ViewController(Page2);
-
-      // act
-      nav._beforeTrans(view1, view2, {}, () => {});
-    });
-
-    it('should not begin transition when entering stated is inactive', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_INACTIVE;
-
-      let wasDoneCalled = false;
-      let done = () => {
-        wasDoneCalled = true;
-      };
-
-      nav._beforeTrans(view1, null, {}, done);
-
-      expect(wasDoneCalled).toEqual(true);
-      expect(view1.state).toEqual(STATE_INACTIVE);
-    });
-
-    it('should not begin transition when entering state is canceled', () => {
-      let view1 = new ViewController(Page1);
-      view1.state = STATE_CANCEL_ENTER;
-
-      let wasDoneCalled = false;
-      let done = () => {
-        wasDoneCalled = true;
-      };
-
-      nav._beforeTrans(view1, null, {}, done);
-
-      expect(wasDoneCalled).toEqual(true);
-      expect(view1.state).toEqual(STATE_CANCEL_ENTER);
-    });
-  });
-
-  /* private method */
-  describe('getLongestTrans', () => {
-    it('should return 0 when transition end time is less than 0', () => {
-      // arrange
-      nav.parent = null;
-      // act
-      let returnedValue = nav.getLongestTrans(Date.now());
-      // asssert
-      expect(returnedValue).toEqual(0);
-    });
-
-    it('should return 0 when transition end time is less than now', () => {
-      // arrange
-      nav.parent = {
-        trnsTime: Date.now() - 5
-      };
-      // act
-      let returnedValue = nav.getLongestTrans(Date.now());
-      // asssert
-      expect(returnedValue).toEqual(0);
-    });
-
-    it('should return 0 when parent transition time not set', () => {
-      // arrange
-      nav.parent = {
-        trnsTime: undefined
-      };
-      // act
-      let returnedValue = nav.getLongestTrans(Date.now());
-      // asssert
-      expect(returnedValue).toEqual(0);
-    });
-
-    it('should return transitionEndTime when transition end time is greater than now', () => {
-      // arrange
-      let expectedReturnValue = Date.now() + 100;
-      nav.parent = {
-        trnsTime: expectedReturnValue
-      };
-      // act
-      let returnedValue = nav.getLongestTrans(Date.now());
-      // asssert
-      expect(returnedValue).toEqual(expectedReturnValue);
-    });
-
-    it('should return the greatest end of transition time if found on first parent', () => {
-      // arrange
-      let expectedReturnValue = Date.now() + 100;
-      let firstParent: any = {
-        trnsTime: expectedReturnValue
-      };
-      let secondParent: any = {
-        trnsTime: Date.now() + 50
-      };
-      let thirdParent: any = {
-        trnsTime: Date.now()
-      };
-      let fourthParent: any = {
-        trnsTime: Date.now() + 20
-      };
-      firstParent.parent = secondParent;
-      secondParent.parent = thirdParent;
-      thirdParent.parent = fourthParent;
-      nav.parent = firstParent;
-      // act
-      let returnedValue = nav.getLongestTrans(Date.now());
-      // asssert
-      expect(returnedValue).toEqual(expectedReturnValue);
-    });
-
-    it('should return the greatest end of transition time if found on middle parent', () => {
-      // arrange
-      let expectedReturnValue = Date.now() + 100;
-      let firstParent: any = {
-        trnsTime: Date.now()
-      };
-      let secondParent: any = {
-        trnsTime: Date.now() + 50
-      };
-      let thirdParent: any = {
-        trnsTime: expectedReturnValue
-      };
-      let fourthParent = {
-        trnsTime: Date.now() + 20
-      };
-      firstParent.parent = secondParent;
-      secondParent.parent = thirdParent;
-      thirdParent.parent = fourthParent;
-      nav.parent = firstParent;
-      // act
-      let returnedValue = nav.getLongestTrans(Date.now());
-      // asssert
-      expect(returnedValue).toEqual(expectedReturnValue);
-    });
-
-    it('should return the greatest end of transition time if found on last parent', () => {
-      // arrange
-      let expectedReturnValue = Date.now() + 100;
-      let firstParent: any = {
-        trnsTime: Date.now()
-      };
-      let secondParent: any = {
-        trnsTime: Date.now() + 50
-      };
-      let thirdParent: any = {
-        trnsTime: Date.now() + 20
-      };
-      let fourthParent = {
-        trnsTime: expectedReturnValue
-      };
-      firstParent.parent = secondParent;
-      secondParent.parent = thirdParent;
-      thirdParent.parent = fourthParent;
-      nav.parent = firstParent;
-      // act
-      let returnedValue = nav.getLongestTrans(Date.now());
-      // asssert
-      expect(returnedValue).toEqual(expectedReturnValue);
-    });
-  });
-
-  // setup stuff
-  let nav: NavControllerBase;
-
-  class Page1 {}
-  class Page2 {}
-  class Page3 {}
-  class Page4 {}
-  class Page5 {}
-
-  beforeEach(() => {
-    nav = mockNavController();
-  });
-
-});
-}
diff --git a/src/components/nav/test/nested/index.ts b/src/components/nav/test/nested/index.ts
deleted file mode 100644
index 2310c9b254..0000000000
--- a/src/components/nav/test/nested/index.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, NavController, MenuController } from '../../../../../src';
-import { Config, Nav, App } from '../../../../../src';
-
-
-@Component({
-  template: `
-    <ion-header>
-      <ion-navbar>
-        <ion-title>Login</ion-title>
-      </ion-navbar>
-    </ion-header>
-    <ion-content style="text-align:center;" padding>
-      <p><button ion-button (click)="goToAccount()">Login</button></p>
-      <p><button ion-button (click)="goBack()">App goBack()</button></p>
-    </ion-content>
-  `
-})
-export class Login {
-  constructor(public navCtrl: NavController, public app: App) {}
-
-  goToAccount() {
-    this.navCtrl.push(Account);
-  }
-
-  goBack() {
-    this.app.navPop();
-  }
-}
-
-
-@Component({
-  template: `
-    <ion-menu [content]="content">
-     <ion-header>
-      <ion-toolbar color="secondary">
-        <ion-title>Account Menu</ion-title>
-      </ion-toolbar>
-     </ion-header>
-     <ion-content>
-       <ion-list>
-         <button ion-item (click)="goToProfile()">
-           Profile
-         </button>
-         <button ion-item (click)="goToDashboard()">
-           Dashboard
-         </button>
-         <button ion-item detail-none (click)="logOut()">
-           Logout
-         </button>
-         <button ion-item detail-none (click)="goBack()">
-           App Go Back
-         </button>
-       </ion-list>
-     </ion-content>
-    </ion-menu>
-
-    <ion-nav #accountNav #content [root]="root" swipeBackEnabled="false"></ion-nav>
-  `
-})
-export class Account {
-  @ViewChild('accountNav') accountNav: Nav;
-
-  root = Dashboard;
-
-  constructor(public menuCtrl: MenuController, public app: App) {}
-
-  goToProfile() {
-    this.accountNav.setRoot(Profile).then(() => {
-      this.menuCtrl.close();
-    });
-  }
-
-  goToDashboard() {
-    this.accountNav.setRoot(Dashboard).then(() => {
-      this.menuCtrl.close();
-    });
-  }
-
-  logOut() {
-    this.accountNav.setRoot(Login, null, { animate: true }).then(() => {
-      this.menuCtrl.close();
-    });
-  }
-
-  goBack() {
-    this.app.navPop();
-  }
-}
-
-
-@Component({
-  template: `
-    <ion-header>
-      <ion-navbar color="primary">
-        <button ion-button menuToggle>
-          <ion-icon name="menu"></ion-icon>
-        </button>
-        <ion-title>Account Dashboard</ion-title>
-      </ion-navbar>
-    </ion-header>
-    <ion-content padding>
-      <p><button ion-button (click)="goToProfile()">Profile</button></p>
-      <p><button ion-button (click)="logOut()">Logout</button></p>
-      <p><button ion-button (click)="goBack()">App goBack()</button></p>
-    </ion-content>
-  `
-})
-export class Dashboard {
-  constructor(public navCtrl: NavController, public app: App) {}
-
-  goToProfile() {
-    this.navCtrl.push(Profile);
-  }
-
-  logOut() {
-    this.navCtrl.parent.setRoot(Login, null, {
-      animate: true,
-      direction: 'back'
-    });
-  }
-
-  goBack() {
-    this.app.navPop();
-  }
-}
-
-
-@Component({
-  template: `
-    <ion-header>
-      <ion-navbar color="danger">
-        <button ion-button menuToggle>
-          <ion-icon name="menu"></ion-icon>
-        </button>
-        <ion-title>Account Profile</ion-title>
-      </ion-navbar>
-    </ion-header>
-    <ion-content padding>
-      <p><button ion-button (click)="goToDashboard()">Dashboard</button></p>
-      <p><button ion-button (click)="logOut()">Logout</button></p>
-      <p><button ion-button (click)="goBack()">App goBack()</button></p>
-    </ion-content>
-  `
-})
-export class Profile {
-  constructor(public navCtrl: NavController, public app: App) {}
-
-  goToDashboard() {
-    this.navCtrl.push(Dashboard);
-  }
-
-  logOut() {
-    this.navCtrl.parent.setRoot(Login, null, {
-      animate: true,
-      direction: 'back'
-    });
-  }
-
-  goBack() {
-    this.app.navPop();
-  }
-}
-
-
-@Component({
-  template: `<ion-nav [root]="rootPage" swipeBackEnabled="false"></ion-nav>`
-})
-class E2EApp {
-  rootPage = Login;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/picker/test/basic/index.ts b/src/components/picker/test/basic/app-module.ts
similarity index 92%
rename from src/components/picker/test/basic/index.ts
rename to src/components/picker/test/basic/app-module.ts
index 6540081856..6a8270e95e 100644
--- a/src/components/picker/test/basic/index.ts
+++ b/src/components/picker/test/basic/app-module.ts
@@ -1,12 +1,12 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap, PickerController } from '../../../../../src';
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, PickerController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html',
   encapsulation: ViewEncapsulation.None,
 })
-class E2EPage {
+export class E2EPage {
   smoothie: string;
   timer: string;
 
@@ -213,8 +213,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/picker/test/basic/e2e.ts b/src/components/picker/test/basic/e2e.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/popover/test/basic/index.ts b/src/components/popover/test/basic/app-module.ts
similarity index 85%
rename from src/components/popover/test/basic/index.ts
rename to src/components/popover/test/basic/app-module.ts
index 02466f1e4c..2e25f6dc14 100644
--- a/src/components/popover/test/basic/index.ts
+++ b/src/components/popover/test/basic/app-module.ts
@@ -1,5 +1,5 @@
-import { Component, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap, PopoverController, NavParams, ViewController } from '../../../../../src';
+import { Component, ViewChild, ElementRef, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, PopoverController, NavParams, ViewController } from '../../../..';
 
 
 @Component({
@@ -8,10 +8,10 @@ import { ionicBootstrap, PopoverController, NavParams, ViewController } from '..
       <ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
         <ion-row>
           <ion-col>
-            <button ion-button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
+            <button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
           </ion-col>
           <ion-col>
-            <button ion-button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
+            <button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
           </ion-col>
         </ion-row>
         <ion-row class="row-dots">
@@ -60,7 +60,7 @@ import { ionicBootstrap, PopoverController, NavParams, ViewController } from '..
     </ion-content>
   `,
 })
-class PopoverRadioPage {
+export class PopoverRadioPage {
   background: string;
   contentEle: any;
   textEle: any;
@@ -142,7 +142,7 @@ class PopoverRadioPage {
     </ion-list>
   `
 })
-class PopoverListPage {
+export class PopoverListPage {
   constructor(private viewCtrl: ViewController) {}
 
   close() {
@@ -161,7 +161,7 @@ class PopoverListPage {
     </ion-content>
   `
 })
-class PopoverLongListPage {
+export class PopoverLongListPage {
   items: number[] = [];
 
   ngOnInit() {
@@ -175,7 +175,7 @@ class PopoverLongListPage {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
   @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;
 
@@ -217,11 +217,30 @@ class E2EPage {
 
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>',
-  styleUrls: ['style.css'],
   encapsulation: ViewEncapsulation.None
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    PopoverRadioPage,
+    PopoverListPage,
+    PopoverLongListPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    PopoverRadioPage,
+    PopoverListPage,
+    PopoverLongListPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/popover/test/basic/main.html b/src/components/popover/test/basic/main.html
index 5b80c42471..e10d3e5622 100644
--- a/src/components/popover/test/basic/main.html
+++ b/src/components/popover/test/basic/main.html
@@ -1,3 +1,5 @@
+<div class="e2e-popover-basic">
+
 <ion-header>
 
   <ion-navbar color="primary">
@@ -80,3 +82,5 @@
   </ion-toolbar>
 
 </ion-footer>
+
+</div>
\ No newline at end of file
diff --git a/src/components/popover/test/basic/style.css b/src/components/popover/test/basic/style.css
deleted file mode 100644
index 675528b09e..0000000000
--- a/src/components/popover/test/basic/style.css
+++ /dev/null
@@ -1,122 +0,0 @@
-.text-to-change div {
-  margin: 10px auto;
-}
-
-ion-row,
-ion-col {
-  padding: 0;
-}
-
-.text-button {
-  padding-left: 0;
-  text-align: center;
-  min-height: 20px;
-  line-height: 18px;
-}
-
-.text-button .item-inner {
-  padding-right: 0;
-}
-
-.text-smaller {
-  font-size: 12px;
-}
-
-.ios .text-smaller {
-  border-right: 1px solid #c8c7cc;
-}
-
-.md .text-smaller {
-  border-right: 1px solid #dedede;
-}
-
-.text-larger {
-  font-size: 16px;
-}
-
-.row-dots {
-  text-align: center;
-}
-
-.ios .row-dots {
-  border-bottom: 1px solid #c8c7cc;
-}
-
-.md .row-dots {
-  border-bottom: 1px solid #dedede;
-}
-
-.ios .dot {
-  border: 1px solid #c8c7cc;
-}
-
-.md .dot {
-  border: 1px solid #dedede;
-}
-
-.wp .dot {
-  border: 2px solid #ccc;
-}
-
-.hairlines .text-smaller,
-.hairlines .row-dots,
-.hairlines .dot {
-  border-width: 0.55px;
-}
-
-.row-dots .dot {
-  height: 30px;
-  width: 30px;
-  border-radius: 50%;
-  margin: 10px auto;
-  position: relative;
-}
-
-.dot-white {
-  background-color: rgb(255,255,255);
-}
-
-.dot-tan {
-  background-color: rgb(249,241,228);
-}
-
-.dot-grey {
-  background-color: rgb(76,75,80);
-}
-
-.dot-black {
-  background-color: rgb(0,0,0);
-}
-
-.dot.selected {
-  border-width: 2px;
-  border-color: #327eff;
-}
-
-.text-athelas {
-  font-family: "Athelas";
-}
-
-.text-charter {
-  font-family: "Charter";
-}
-
-.text-iowan {
-  font-family: "Iowan";
-}
-
-.text-palatino {
-  font-family: "Palatino";
-}
-
-.text-san-francisco {
-  font-family: "San Francisco";
-}
-
-.text-seravek {
-  font-family: "Seravek";
-}
-
-.text-times-new-roman {
-  font-family: "Times New Roman";
-}
diff --git a/src/components/radio/test/basic/index.ts b/src/components/radio/test/basic/app-module.ts
similarity index 59%
rename from src/components/radio/test/basic/index.ts
rename to src/components/radio/test/basic/app-module.ts
index 445d74b5c4..24822d7a43 100644
--- a/src/components/radio/test/basic/index.ts
+++ b/src/components/radio/test/basic/app-module.ts
@@ -1,34 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { ionicBootstrap, RadioButton, RadioGroup } from '../../../../../src';
+import { IonicApp, IonicModule, RadioButton, RadioGroup } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
-  fruits: FormControl;
-  fruitsForm: FormGroup;
-  currenciesControl: FormControl;
-  currencyForm: FormGroup;
+export class E2EPage {
   currencies: Array<string>;
   items: Array<{description: string, value: any}>;
   relationship: string;
   selectedTime: number = 60;
+  someValue: string;
+
+  fruitsCtrl = new FormControl('apple');
+  fruitsForm = new FormGroup({
+    'fruitsCtrl': this.fruitsCtrl
+  });
+
+  currenciesControl = new FormControl('EUR');
+  currencyForm = new FormGroup({
+    'currenciesControl': this.currenciesControl
+  });
 
   constructor() {
-    this.fruits = new FormControl('apple');
-
-    this.fruitsForm = new FormGroup({
-      'fruits': this.fruits
-    });
-
     this.currencies = ['USD', 'EUR'];
-    this.currenciesControl = new FormControl('EUR');
-    this.currencyForm = new FormGroup({
-      'currenciesControl': this.currenciesControl
-    });
-
     this.relationship = 'enemies';
 
     this.items = [
@@ -40,15 +36,15 @@ class E2EPage {
   }
 
   setApple() {
-    this.fruits.updateValue('apple');
+    this.fruitsCtrl.updateValueAndValidity('apple');
   }
 
   setBanana() {
-    this.fruits.updateValue('banana');
+    this.fruitsCtrl.updateValueAndValidity('banana');
   }
 
   setCherry() {
-    this.fruits.updateValue('cherry');
+    this.fruitsCtrl.updateValueAndValidity('cherry');
   }
 
   doSubmit(ev: UIEvent) {
@@ -76,8 +72,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html
index 0b769b49f3..f52c56e5d3 100644
--- a/src/components/radio/test/basic/main.html
+++ b/src/components/radio/test/basic/main.html
@@ -12,7 +12,7 @@
 
   <form (submit)="doSubmit($event)" [formGroup]="fruitsForm">
 
-    <ion-list radio-group formControlName="fruits">
+    <ion-list radio-group formControlName="fruitsCtrl">
 
       <ion-list-header>
         Fruits
@@ -64,8 +64,8 @@
   </div>
 
   <div padding>
-    <code><b>fruits.dirty:</b> {{fruitsForm.controls.fruits.dirty}}</code><br>
-    <code><b>fruits.value:</b> {{fruitsForm.controls.fruits.value}}</code><br>
+    <code><b>fruits.dirty:</b> {{fruitsCtrl.dirty}}</code><br>
+    <code><b>fruits.value:</b> {{fruitsCtrl.value}}</code><br>
   </div>
 
   <form (submit)="doSubmit($event)" [formGroup]="currencyForm">
@@ -81,7 +81,7 @@
   </form>
 
   <div padding>
-    <code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
+    <code><b>currenciesControl.value:</b> {{currenciesControl.value}}</code>
   </div>
 
   <ion-list radio-group [(ngModel)]="relationship">
diff --git a/src/components/radio/test/radio.spec.ts b/src/components/radio/test/radio.spec.ts
index 39b2f51d16..3cc5bbb6b1 100644
--- a/src/components/radio/test/radio.spec.ts
+++ b/src/components/radio/test/radio.spec.ts
@@ -1,133 +1,129 @@
-import { RadioGroup, RadioButton, Form } from '../../../../src';
+import { RadioGroup } from '../radio-group';
+import { RadioButton } from '../radio-button';
+import { Form } from '../../../util/form';
+import { mockConfig, mockRenderer, mockElementRef } from '../../../util/mock-providers';
 
-export function run() {
-  describe('RadioGroup', () => {
 
-    describe('_update', () => {
+describe('RadioGroup', () => {
 
-      it('should set checked via string values', () => {
-        let rb1 = createRadioButton();
-        rb1.value = 'string1';
-        let rb2 = createRadioButton();
-        rb2.value = 'string2';
-        let rb3 = createRadioButton();
-        rb3.value = 'string3';
+  describe('_update', () => {
 
-        rg.value = 'string1';
-        rg._update();
+    it('should set checked via string values', () => {
+      let rb1 = createRadioButton();
+      rb1.value = 'string1';
+      let rb2 = createRadioButton();
+      rb2.value = 'string2';
+      let rb3 = createRadioButton();
+      rb3.value = 'string3';
 
-        expect(rb1.checked).toEqual(true);
-        expect(rb2.checked).toEqual(false);
-        expect(rb3.checked).toEqual(false);
-      });
-
-      it('should set checked via string group value, and number button values', () => {
-        let rb1 = createRadioButton();
-        rb1.value = 1;
-        let rb2 = createRadioButton();
-        rb2.value = 2;
-        let rb3 = createRadioButton();
-        rb3.value = 3;
-
-        rg.value = '1';
-        rg._update();
-
-        expect(rb1.checked).toEqual(true);
-        expect(rb2.checked).toEqual(false);
-        expect(rb3.checked).toEqual(false);
-      });
-
-      it('should set checked via number group value, and string button values', () => {
-        let rb1 = createRadioButton();
-        rb1.value = '1';
-        let rb2 = createRadioButton();
-        rb2.value = '2';
-        let rb3 = createRadioButton();
-        rb3.value = '3';
-
-        rg.value = 1;
-        rg._update();
-
-        expect(rb1.checked).toEqual(true);
-        expect(rb2.checked).toEqual(false);
-        expect(rb3.checked).toEqual(false);
-      });
-
-      it('should set checked via empty string group value, and one empty string button value', () => {
-        let rb1 = createRadioButton();
-        rb1.value = '';
-        let rb2 = createRadioButton();
-        rb2.value = 'value2';
-        let rb3 = createRadioButton();
-        rb3.value = 'value3';
-
-        rg.value = '';
-        rg._update();
-
-        expect(rb1.checked).toEqual(true);
-        expect(rb2.checked).toEqual(false);
-        expect(rb3.checked).toEqual(false);
-      });
-
-      it('should only check at most one value', () => {
-        let rb1 = createRadioButton();
-        rb1.value = 'string1';
-        let rb2 = createRadioButton();
-        rb2.value = 'string1';
-        let rb3 = createRadioButton();
-        rb3.value = 'string1';
-
-        rg.value = 'string1';
-        rg._update();
-
-        expect(rb1.checked).toEqual(true);
-        expect(rb2.checked).toEqual(false);
-        expect(rb3.checked).toEqual(false);
-      });
+      rg.value = 'string1';
+      rg._update();
 
+      expect(rb1.checked).toEqual(true);
+      expect(rb2.checked).toEqual(false);
+      expect(rb3.checked).toEqual(false);
     });
-  });
 
-  describe('RadioButton', () => {
+    it('should set checked via string group value, and number button values', () => {
+      let rb1 = createRadioButton();
+      rb1.value = 1;
+      let rb2 = createRadioButton();
+      rb2.value = 2;
+      let rb3 = createRadioButton();
+      rb3.value = 3;
 
-    describe('ngOnDestroy', () => {
-      it('should work without a group', () => {
-        let rb1 = createRadioButton(false);
-        expect(() => rb1.ngOnDestroy()).not.toThrowError();
-      });
+      rg.value = '1';
+      rg._update();
 
-      it('should remove button from group if part of a radio group', () => {
-        let rb1 = createRadioButton();
-        spyOn(rg, 'remove');
-        rb1.ngOnDestroy();
-        expect(rg.remove).toHaveBeenCalledWith(rb1);
-      });
+      expect(rb1.checked).toEqual(true);
+      expect(rb2.checked).toEqual(false);
+      expect(rb3.checked).toEqual(false);
+    });
 
+    it('should set checked via number group value, and string button values', () => {
+      let rb1 = createRadioButton();
+      rb1.value = '1';
+      let rb2 = createRadioButton();
+      rb2.value = '2';
+      let rb3 = createRadioButton();
+      rb3.value = '3';
+
+      rg.value = 1;
+      rg._update();
+
+      expect(rb1.checked).toEqual(true);
+      expect(rb2.checked).toEqual(false);
+      expect(rb3.checked).toEqual(false);
+    });
+
+    it('should set checked via empty string group value, and one empty string button value', () => {
+      let rb1 = createRadioButton();
+      rb1.value = '';
+      let rb2 = createRadioButton();
+      rb2.value = 'value2';
+      let rb3 = createRadioButton();
+      rb3.value = 'value3';
+
+      rg.value = '';
+      rg._update();
+
+      expect(rb1.checked).toEqual(true);
+      expect(rb2.checked).toEqual(false);
+      expect(rb3.checked).toEqual(false);
+    });
+
+    it('should only check at most one value', () => {
+      let rb1 = createRadioButton();
+      rb1.value = 'string1';
+      let rb2 = createRadioButton();
+      rb2.value = 'string1';
+      let rb3 = createRadioButton();
+      rb3.value = 'string1';
+
+      rg.value = 'string1';
+      rg._update();
+
+      expect(rb1.checked).toEqual(true);
+      expect(rb2.checked).toEqual(false);
+      expect(rb3.checked).toEqual(false);
     });
 
   });
 
-  let rg: RadioGroup;
-  let form: Form;
-
-  function createRadioButton(shouldIncludeGroup = true) {
-    return new RadioButton(form, null, null, null, shouldIncludeGroup ? rg : null);
-  }
-
-  function mockRenderer(): any {
-    return {
-      setElementAttribute: function(){}
-    };
-  }
-
-  function mockElementRef(): any {
-    return {
-      nativeElement: document.createElement('div')
-    };
-  }
-
   beforeEach(() => {
     rg = new RadioGroup(mockRenderer(), mockElementRef());
     form = new Form();
   });
+
+});
+
+describe('RadioButton', () => {
+
+  describe('ngOnDestroy', () => {
+    it('should work without a group', () => {
+      let rb1 = createRadioButton(false);
+      expect(() => rb1.ngOnDestroy()).not.toThrowError();
+    });
+
+    it('should remove button from group if part of a radio group', () => {
+      let rb1 = createRadioButton();
+      spyOn(rg, 'remove');
+      rb1.ngOnDestroy();
+      expect(rg.remove).toHaveBeenCalledWith(rb1);
+    });
+
+  });
+
+  beforeEach(() => {
+    rg = new RadioGroup(mockRenderer(), mockElementRef());
+    form = new Form();
+  });
+
+});
+
+let rg: RadioGroup;
+let form: Form;
+
+function createRadioButton(shouldIncludeGroup = true) {
+  return new RadioButton(form, mockConfig(), mockElementRef(), mockRenderer(), null, shouldIncludeGroup ? rg : null);
 }
diff --git a/src/components/range/test/basic/index.ts b/src/components/range/test/basic/app-module.ts
similarity index 52%
rename from src/components/range/test/basic/index.ts
rename to src/components/range/test/basic/app-module.ts
index 2a0a610d15..39c32e9e45 100644
--- a/src/components/range/test/basic/index.ts
+++ b/src/components/range/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, Range } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Range } from '../../../..';
 
 
 @Component({
   templateUrl: 'page1.html'
 })
-class Page1 {
+export class Page1 {
   singleValue: number;
   singleValue2: number = 150;
   singleValue3: number = 64;
@@ -22,8 +22,22 @@ class Page1 {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = Page1;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/refresher/test/basic/index.ts b/src/components/refresher/test/basic/app-module.ts
similarity index 81%
rename from src/components/refresher/test/basic/index.ts
rename to src/components/refresher/test/basic/app-module.ts
index 859232c9b7..465ce17b5b 100644
--- a/src/components/refresher/test/basic/index.ts
+++ b/src/components/refresher/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, Refresher } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Refresher } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class Page1 {
+export class Page1 {
   items: string[] = [];
 
   constructor() {
@@ -89,8 +89,22 @@ const data = [
 @Component({
   template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   rootPage = Page1;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/scroll/test/basic/app-module.ts b/src/components/scroll/test/basic/app-module.ts
new file mode 100644
index 0000000000..0874dff8da
--- /dev/null
+++ b/src/components/scroll/test/basic/app-module.ts
@@ -0,0 +1,26 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EApp {
+  doRefresh() {
+    console.log('DOREFRESH');
+  }
+}
+
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/scroll/test/basic/index.ts b/src/components/scroll/test/basic/index.ts
deleted file mode 100644
index 53052edd37..0000000000
--- a/src/components/scroll/test/basic/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EApp {
-  doRefresh() {
-    console.log('DOREFRESH');
-  }
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/searchbar/test/basic/index.ts b/src/components/searchbar/test/basic/app-module.ts
similarity index 72%
rename from src/components/searchbar/test/basic/index.ts
rename to src/components/searchbar/test/basic/app-module.ts
index 0bb02d84df..b8a0858ea4 100644
--- a/src/components/searchbar/test/basic/index.ts
+++ b/src/components/searchbar/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, ChangeDetectorRef, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   defaultSearch: string = 'test';
   customPlaceholder: number = 2;
   defaultCancel: string = '';
@@ -52,8 +52,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/searchbar/test/nav/index.ts b/src/components/searchbar/test/nav/app-module.ts
similarity index 76%
rename from src/components/searchbar/test/nav/index.ts
rename to src/components/searchbar/test/nav/app-module.ts
index af978822d9..f75d1de3fa 100644
--- a/src/components/searchbar/test/nav/index.ts
+++ b/src/components/searchbar/test/nav/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController, NavParams } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, NavController, NavParams } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class MainPage {
+export class MainPage {
   constructor(public navCtrl: NavController) { }
 
   goToSecond() {
@@ -16,7 +16,7 @@ class MainPage {
 @Component({
   templateUrl: 'search.html'
 })
-class SearchPage {
+export class SearchPage {
   items: string[];
 
   constructor(public navCtrl: NavController) {
@@ -93,7 +93,7 @@ class SearchPage {
 @Component({
   templateUrl: 'detail.html'
 })
-class DetailPage {
+export class DetailPage {
   city: string;
 
   constructor(private _navParams: NavParams) {
@@ -104,7 +104,7 @@ class DetailPage {
 @Component({
   templateUrl: 'tabs.html'
 })
-class TabsPage {
+export class TabsPage {
   mainPage = MainPage;
   searchPage = SearchPage;
 }
@@ -112,8 +112,28 @@ class TabsPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = TabsPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    MainPage,
+    SearchPage,
+    DetailPage,
+    TabsPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    MainPage,
+    SearchPage,
+    DetailPage,
+    TabsPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/searchbar/test/toolbar/app-module.ts b/src/components/searchbar/test/toolbar/app-module.ts
new file mode 100644
index 0000000000..593ca4783c
--- /dev/null
+++ b/src/components/searchbar/test/toolbar/app-module.ts
@@ -0,0 +1,36 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  defaultToolbarSearch: string = '';
+  primaryToolbarSearch: string = '';
+  darkToolbarSearch: string = '';
+  lightToolbarSearch: string = '';
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/searchbar/test/toolbar/index.ts b/src/components/searchbar/test/toolbar/index.ts
deleted file mode 100644
index 48ccb8623f..0000000000
--- a/src/components/searchbar/test/toolbar/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  defaultToolbarSearch: string = '';
-  primaryToolbarSearch: string = '';
-  darkToolbarSearch: string = '';
-  lightToolbarSearch: string = '';
-}
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/segment/test/basic/index.ts b/src/components/segment/test/basic/app-module.ts
similarity index 70%
rename from src/components/segment/test/basic/index.ts
rename to src/components/segment/test/basic/app-module.ts
index c8afcbe867..a7742dbfdd 100644
--- a/src/components/segment/test/basic/index.ts
+++ b/src/components/segment/test/basic/app-module.ts
@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
-import { ionicBootstrap, SegmentButton } from '../../../../../src';
+import { IonicApp, IonicModule, SegmentButton } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   relationship: string = 'enemies';
   modelStyle: string = 'B';
   appType: string = 'free';
@@ -41,8 +41,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/segment/test/nav/index.ts b/src/components/segment/test/nav/app-module.ts
similarity index 58%
rename from src/components/segment/test/nav/index.ts
rename to src/components/segment/test/nav/app-module.ts
index 1cef045f35..0ae102e83a 100644
--- a/src/components/segment/test/nav/index.ts
+++ b/src/components/segment/test/nav/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, NavController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html',
 })
-class SegmentPage {
+export class SegmentPage {
   signInType: string;
 
   constructor(public navCtrl: NavController) {
@@ -35,14 +35,30 @@ class SegmentPage {
     </ion-content>
   `
 })
-class SegmentPage2 {}
+export class SegmentPage2 {}
 
 
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`
 })
-class E2EApp {
+export class E2EApp {
   root = SegmentPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    SegmentPage,
+    SegmentPage2
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    SegmentPage,
+    SegmentPage2
+  ]
+})
+export class AppModule {}
diff --git a/src/components/segment/test/swipe/index.ts b/src/components/segment/test/swipe/app-module.ts
similarity index 51%
rename from src/components/segment/test/swipe/index.ts
rename to src/components/segment/test/swipe/app-module.ts
index 60b791b943..0ab9cec0b2 100644
--- a/src/components/segment/test/swipe/index.ts
+++ b/src/components/segment/test/swipe/app-module.ts
@@ -1,26 +1,26 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, Slides, SegmentButton } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Slides, SegmentButton } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html',
 })
-class SegmentPage {
+export class SegmentPage {
   @ViewChild('loopSlider') sliderComponent: Slides;
 
-  selectedSegment = "first";
+  selectedSegment = 'first';
   slides = [
     {
-      id: "first",
-      title: "First Slide"
+      id: 'first',
+      title: 'First Slide'
     },
     {
-      id: "second",
-      title: "Second Slide"
+      id: 'second',
+      title: 'Second Slide'
     },
     {
-      id: "third",
-      title: "Third Slide"
+      id: 'third',
+      title: 'Third Slide'
     }
   ];
 
@@ -29,7 +29,7 @@ class SegmentPage {
   }
 
   onSegmentChanged(segmentButton: SegmentButton) {
-    console.log("Segment changed to", segmentButton.value);
+    console.log('Segment changed to', segmentButton.value);
 
     const selectedIndex = this.slides.findIndex((slide) => {
       return slide.id === segmentButton.value;
@@ -49,8 +49,22 @@ class SegmentPage {
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`
 })
-class E2EApp {
+export class E2EApp {
   root = SegmentPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    SegmentPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    SegmentPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/select/test/multiple-value/index.ts b/src/components/select/test/multiple-value/app-module.ts
similarity index 73%
rename from src/components/select/test/multiple-value/index.ts
rename to src/components/select/test/multiple-value/app-module.ts
index bf8f707dce..be4ce4cac3 100644
--- a/src/components/select/test/multiple-value/index.ts
+++ b/src/components/select/test/multiple-value/app-module.ts
@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { ionicBootstrap } from '../../../../../src';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   toppings: Array<string>;
   carFeatures: Array<string>;
   pets: Array<string>;
@@ -47,8 +47,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/select/test/multiple-value/e2e.ts b/src/components/select/test/multiple-value/e2e.ts
index 48f1324e4a..731f977a74 100644
--- a/src/components/select/test/multiple-value/e2e.ts
+++ b/src/components/select/test/multiple-value/e2e.ts
@@ -1,4 +1,4 @@
 
 it('should open toppings multiple select', function() {
   element(by.css('.e2eSelectToppings button')).click();
-});
\ No newline at end of file
+});
diff --git a/src/components/select/test/single-value/index.ts b/src/components/select/test/single-value/app-module.ts
similarity index 80%
rename from src/components/select/test/single-value/index.ts
rename to src/components/select/test/single-value/app-module.ts
index bb58a8ad70..b5ca788866 100644
--- a/src/components/select/test/single-value/index.ts
+++ b/src/components/select/test/single-value/app-module.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 export interface Currency {
   symbol: string;
@@ -10,7 +10,8 @@ export interface Currency {
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
+  notifications: any;
   musicSelectOpts: any = {
     title: '1994 Music',
     subTitle: 'Select your favorite',
@@ -87,8 +88,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/select/test/single-value/e2e.ts b/src/components/select/test/single-value/e2e.ts
index 03954febef..0e536eabc7 100644
--- a/src/components/select/test/single-value/e2e.ts
+++ b/src/components/select/test/single-value/e2e.ts
@@ -1,4 +1,4 @@
 
 it('should open gender single select', function() {
   element(by.css('.e2eSelectGender button')).click();
-});
\ No newline at end of file
+});
diff --git a/src/components/show-hide-when/test/basic/app-module.ts b/src/components/show-hide-when/test/basic/app-module.ts
new file mode 100644
index 0000000000..a906c2641b
--- /dev/null
+++ b/src/components/show-hide-when/test/basic/app-module.ts
@@ -0,0 +1,34 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  toggle = true;
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/show-hide-when/test/basic/index.ts b/src/components/show-hide-when/test/basic/index.ts
deleted file mode 100644
index 946a39ade9..0000000000
--- a/src/components/show-hide-when/test/basic/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/slides/test/basic/index.ts b/src/components/slides/test/basic/app-module.ts
similarity index 75%
rename from src/components/slides/test/basic/index.ts
rename to src/components/slides/test/basic/app-module.ts
index 7267dd95ab..c85c8e4dc9 100644
--- a/src/components/slides/test/basic/index.ts
+++ b/src/components/slides/test/basic/app-module.ts
@@ -1,12 +1,12 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, NgModule } from '@angular/core';
 import { Http } from '@angular/http';
-import { ionicBootstrap, Slides } from '../../../../../src';
+import { IonicApp, IonicModule, Slides } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   mySlideOptions: any;
   images: string[] = [];
   @ViewChild(Slides) slider: Slides;
@@ -43,4 +43,16 @@ class E2EApp {
 
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/slides/test/controller/index.ts b/src/components/slides/test/controller/app-module.ts
similarity index 70%
rename from src/components/slides/test/controller/index.ts
rename to src/components/slides/test/controller/app-module.ts
index 03b122e490..827a5260e5 100644
--- a/src/components/slides/test/controller/index.ts
+++ b/src/components/slides/test/controller/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, Slides } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Slides } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class MyPage {
+export class MyPage {
   @ViewChild('mySlider') slider: Slides;
   mySlideOptions = {
     initialSlide: 1,
@@ -49,8 +49,22 @@ class MyPage {
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`
 })
-class E2EApp {
+export class E2EApp {
   root: any = MyPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    MyPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    MyPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/slides/test/intro/index.ts b/src/components/slides/test/intro/app-module.ts
similarity index 71%
rename from src/components/slides/test/intro/index.ts
rename to src/components/slides/test/intro/app-module.ts
index 45c337df6a..7ff7111824 100644
--- a/src/components/slides/test/intro/index.ts
+++ b/src/components/slides/test/intro/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, NavController } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class IntroPage {
+export class IntroPage {
   continueText: string = 'Skip';
   startingIndex: number = 1;
   mySlideOptions: any;
@@ -55,14 +55,30 @@ class IntroPage {
   </ion-content>
   `
 })
-class MainPage {}
+export class MainPage {}
 
 
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = IntroPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    IntroPage,
+    MainPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    IntroPage,
+    MainPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/slides/test/loop/index.ts b/src/components/slides/test/loop/app-module.ts
similarity index 65%
rename from src/components/slides/test/loop/index.ts
rename to src/components/slides/test/loop/app-module.ts
index 582158acbe..8eda3ccdeb 100644
--- a/src/components/slides/test/loop/index.ts
+++ b/src/components/slides/test/loop/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { ionicBootstrap, Slides } from '../../../../../src';
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Slides } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EApp {
+export class E2EApp {
   slides: any[];
   @ViewChild('loopSlider') loopSlider: Slides;
   startingIndex: number;
@@ -44,4 +44,16 @@ class E2EApp {
 
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/slides/test/scroll/app-module.ts b/src/components/slides/test/scroll/app-module.ts
new file mode 100644
index 0000000000..874b3a3c29
--- /dev/null
+++ b/src/components/slides/test/scroll/app-module.ts
@@ -0,0 +1,22 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EApp {}
+
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/slides/test/scroll/index.ts b/src/components/slides/test/scroll/index.ts
deleted file mode 100644
index 13b93540f2..0000000000
--- a/src/components/slides/test/scroll/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EApp {}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/spinner/test/basic/app-module.ts b/src/components/spinner/test/basic/app-module.ts
new file mode 100644
index 0000000000..857cb83ccd
--- /dev/null
+++ b/src/components/spinner/test/basic/app-module.ts
@@ -0,0 +1,38 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  paused: boolean = false;
+
+  toggleState() {
+    this.paused = !this.paused;
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/spinner/test/basic/index.ts b/src/components/spinner/test/basic/index.ts
deleted file mode 100644
index c196220921..0000000000
--- a/src/components/spinner/test/basic/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  paused: boolean = false;
-
-  toggleState() {
-    this.paused = !this.paused;
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/spinner/test/colors/app-module.ts b/src/components/spinner/test/colors/app-module.ts
new file mode 100644
index 0000000000..857cb83ccd
--- /dev/null
+++ b/src/components/spinner/test/colors/app-module.ts
@@ -0,0 +1,38 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  paused: boolean = false;
+
+  toggleState() {
+    this.paused = !this.paused;
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/spinner/test/colors/index.ts b/src/components/spinner/test/colors/index.ts
deleted file mode 100644
index c196220921..0000000000
--- a/src/components/spinner/test/colors/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  paused: boolean = false;
-
-  toggleState() {
-    this.paused = !this.paused;
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/tabs/test/advanced/index.ts b/src/components/tabs/test/advanced/app-module.ts
similarity index 59%
rename from src/components/tabs/test/advanced/index.ts
rename to src/components/tabs/test/advanced/app-module.ts
index 8de21910ef..10dbd5f8a5 100644
--- a/src/components/tabs/test/advanced/index.ts
+++ b/src/components/tabs/test/advanced/app-module.ts
@@ -1,48 +1,40 @@
-import { Component, ViewChild } from '@angular/core';
-
-import { App, ionicBootstrap, NavController, NavParams, ModalController, ViewController, Tabs, Tab } from '../../../../../src';
+import { Component, NgModule, ViewChild } from '@angular/core';
+import { /*DeepLink,*/ DeepLinkConfig, IonicApp, IonicModule, App, NavController, NavParams, ModalController, ViewController, Tabs, Tab } from '../../../..';
 
 
+// @DeepLink({ name: 'sign-in' })
 @Component({
   templateUrl: './signIn.html'
 })
-class SignIn {
-  constructor(public navCtrl: NavController) {}
-
-  push() {
-    this.navCtrl.push(TabsPage, {
-      userId: 8675309
-    });
-  }
-}
+export class SignIn {}
 
 
 @Component({
   templateUrl: './modalChat.html'
 })
-class ChatPage {
+export class ChatPage {
+
   constructor(public viewCtrl: ViewController) {}
 
-  ionViewLoaded() {
-    console.log('ChatPage, ionViewLoaded');
+  ionViewDidLoad() {
+    console.log('ChatPage, ionViewDidLoad');
   }
 
-  ionViewDidUnload() {
-    console.log('ChatPage, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('ChatPage, ionViewWillUnload');
   }
 }
 
 
+// @DeepLink({ name: 'tabs' })
 @Component({
   templateUrl: './tabs.html'
 })
-class TabsPage {
-  tab1Root = Tab1Page1;
-  tab2Root = Tab2Page1;
-  tab3Root = Tab3Page1;
+export class TabsPage {
+
   @ViewChild(Tabs) tabs: Tabs;
 
-  constructor(private modalCtrl: ModalController, private params: NavParams) {}
+  constructor(public modalCtrl: ModalController, public params: NavParams) {}
 
   ngAfterViewInit() {
     this.tabs.ionChange.subscribe((tab: Tab) => {
@@ -77,8 +69,8 @@ class TabsPage {
     console.log('TabsPage, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('TabsPage, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('TabsPage, ionViewWillUnload');
   }
 }
 
@@ -86,20 +78,17 @@ class TabsPage {
 //
 // tab 1
 //
+// @DeepLink({ name: 'tab1-page1' })
 @Component({
   templateUrl: './tab1page1.html'
 })
-class Tab1Page1 {
+export class Tab1Page1 {
   userId: string;
 
   constructor(public navCtrl: NavController, public app: App, public tabs: Tabs, public params: NavParams) {
     this.userId = params.get('userId');
   }
 
-  push() {
-    this.navCtrl.push(Tab1Page2);
-  }
-
   goBack() {
     console.log('go back begin');
     this.navCtrl.pop().then((val: any) => {
@@ -131,21 +120,17 @@ class Tab1Page1 {
     console.log('Tab1Page1, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('Tab1Page1, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('Tab1Page1, ionViewWillUnload');
   }
 }
 
 
+// @DeepLink({ name: 'tab1-page2' })
 @Component({
   templateUrl: './tab1page2.html'
 })
-class Tab1Page2 {
-  constructor(public navCtrl: NavController) {}
-
-  push() {
-    this.navCtrl.push(Tab1Page3);
-  }
+export class Tab1Page2 {
 
   ionViewWillEnter() {
     console.log('Tab1Page2, ionViewWillEnter');
@@ -163,16 +148,18 @@ class Tab1Page2 {
     console.log('Tab1Page2, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('Tab1Page2, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('Tab1Page2, ionViewWillUnload');
   }
 }
 
 
+// @DeepLink({ name: 'tab1-page3' })
 @Component({
   templateUrl: './tab1page3.html'
 })
-class Tab1Page3 {
+export class Tab1Page3 {
+
   constructor(public navCtrl: NavController) {}
 
   ionViewWillEnter() {
@@ -191,8 +178,8 @@ class Tab1Page3 {
     console.log('Tab1Page3, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('Tab1Page3, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('Tab1Page3, ionViewWillUnload');
   }
 }
 
@@ -200,15 +187,11 @@ class Tab1Page3 {
 //
 // tab 2
 //
+// @DeepLink({ name: 'tab2-page1' })
 @Component({
   templateUrl: './tab2page1.html'
 })
-class Tab2Page1 {
-  constructor(public navCtrl: NavController) {}
-
-  push() {
-    this.navCtrl.push(Tab2Page2);
-  }
+export class Tab2Page1 {
 
   ionViewWillEnter() {
     console.log('Tab2Page1, ionViewWillEnter');
@@ -226,21 +209,17 @@ class Tab2Page1 {
     console.log('Tab2Page1, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('Tab2Page1, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('Tab2Page1, ionViewWillUnload');
   }
 }
 
 
+// @DeepLink({ name: 'tab2-page2' })
 @Component({
   templateUrl: './tab2page2.html'
 })
-class Tab2Page2 {
-  constructor(public navCtrl: NavController) {}
-
-  push() {
-    this.navCtrl.push(Tab2Page3);
-  }
+export class Tab2Page2 {
 
   ionViewWillEnter() {
     console.log('Tab2Page2, ionViewWillEnter');
@@ -258,16 +237,21 @@ class Tab2Page2 {
     console.log('Tab2Page2, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('Tab2Page2, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('Tab2Page2, ionViewWillUnload');
   }
 }
 
 
+// @DeepLink({
+//   name: 'tab2-page3',
+//   defaultHistory: []
+// })
 @Component({
   templateUrl: './tab2page3.html'
 })
-class Tab2Page3 {
+export class Tab2Page3 {
+
   constructor(public navCtrl: NavController) {}
 
   ionViewWillEnter() {
@@ -286,8 +270,8 @@ class Tab2Page3 {
     console.log('Tab2Page3, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('Tab2Page3, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('Tab2Page3, ionViewWillUnload');
   }
 }
 
@@ -295,10 +279,11 @@ class Tab2Page3 {
 //
 // tab 3
 //
+// @DeepLink({ name: 'tab3-page1' })
 @Component({
   templateUrl: './tab3page1.html'
 })
-class Tab3Page1 {
+export class Tab3Page1 {
 
   ionViewWillEnter() {
     console.log('Tab3Page1, ionViewWillEnter');
@@ -316,17 +301,62 @@ class Tab3Page1 {
     console.log('Tab3Page1, ionViewDidLeave');
   }
 
-  ionViewDidUnload() {
-    console.log('Tab3Page1, ionViewDidUnload');
+  ionViewWillUnload() {
+    console.log('Tab3Page1, ionViewWillUnload');
   }
 }
 
-
 @Component({
-  template: '<ion-nav [root]="root" swipeBackEnabled="false"></ion-nav>'
+  template: '<ion-nav [root]="rootPage" swipeBackEnabled="false"></ion-nav>'
 })
-class E2EApp {
-  root = TabsPage;
+export class E2EApp {
+  rootPage = SignIn;
 }
 
-ionicBootstrap(E2EApp);
+
+export const deepLinkConfig: DeepLinkConfig = {
+  links: [
+    { component: SignIn, name: 'sign-in' },
+    { component: TabsPage, name: 'tabs' },
+    { component: Tab1Page1, name: 'tab1-page1' },
+    { component: Tab1Page2, name: 'tab1-page2' },
+    { component: Tab1Page3, name: 'tab1-page3' },
+    { component: Tab2Page1, name: 'tab2-page1' },
+    { component: Tab2Page2, name: 'tab2-page2' },
+    { component: Tab2Page3, name: 'tab2-page3' },
+    { component: Tab3Page1, name: 'tab3-page1' },
+  ]
+};
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    SignIn,
+    ChatPage,
+    TabsPage,
+    Tab1Page1,
+    Tab1Page2,
+    Tab1Page3,
+    Tab2Page1,
+    Tab2Page2,
+    Tab2Page3,
+    Tab3Page1
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, null, deepLinkConfig)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    SignIn,
+    ChatPage,
+    TabsPage,
+    Tab1Page1,
+    Tab1Page2,
+    Tab1Page3,
+    Tab2Page1,
+    Tab2Page2,
+    Tab2Page3,
+    Tab3Page1
+  ]
+})
+export class AppModule {}
diff --git a/src/components/tabs/test/advanced/e2e.ts b/src/components/tabs/test/advanced/e2e.ts
index bc9e75eaed..44079fa3e1 100644
--- a/src/components/tabs/test/advanced/e2e.ts
+++ b/src/components/tabs/test/advanced/e2e.ts
@@ -1,20 +1,20 @@
 
-// it('should go to Tab1 Page1', function() {
-//   element(by.css('#signIn')).click();
-// });
-//
-// it('should go to Tab1 Page2', function() {
-//   element(by.css('#goToTab1Page2')).click();
-// });
-//
-// it('should go back to Tab1 Page1', function() {
-//   element(by.css('#backToTab1Page1')).click();
-// });
-//
-// it('should go to Tab2 Page1', function() {
-//   element(by.css('.tab-button:nth-of-type(2)')).click();
-// });
-//
-// it('should go back to Tab1 Page1', function() {
-//   element(by.css('.tab-button:nth-of-type(1)')).click();
-// });
+it('should go to Tab1 Page1', function() {
+  element(by.css('.e2eSignIn')).click();
+});
+
+it('should go to Tab1 Page2', function() {
+  element(by.css('.e2eGoToTab1Page2')).click();
+});
+
+it('should go back to Tab1 Page1', function() {
+  element(by.css('.e2eBackToTab1Page1')).click();
+});
+
+it('should go to Tab2 Page1', function() {
+  element(by.css('.tab-button:nth-of-type(2)')).click();
+});
+
+it('should go back to Tab1 Page1', function() {
+  element(by.css('.tab-button:nth-of-type(1)')).click();
+});
diff --git a/src/components/tabs/test/advanced/signIn.html b/src/components/tabs/test/advanced/signIn.html
index 3d2a5059fd..da6b30fe58 100644
--- a/src/components/tabs/test/advanced/signIn.html
+++ b/src/components/tabs/test/advanced/signIn.html
@@ -19,8 +19,12 @@
       <ion-input type="password"></ion-input>
     </ion-item>
     <ion-item>
-      <button ion-button block id="signIn" (click)="push()">Sign In</button>
+      <a ion-button block navPush="TabsPage" class="e2eSignIn">Sign In</a>
     </ion-item>
   </ion-card>
 
+  <p style="text-align: center;">
+    <a navPush="TabsPage">View Tabs Page</a>
+  </p>
+
 </ion-content>
diff --git a/src/components/tabs/test/advanced/tab1page1.html b/src/components/tabs/test/advanced/tab1page1.html
index 821c5a9b6b..91dc13ff84 100644
--- a/src/components/tabs/test/advanced/tab1page1.html
+++ b/src/components/tabs/test/advanced/tab1page1.html
@@ -9,12 +9,12 @@
 
 <ion-content padding>
 
-  <p><button ion-button id="goToTab1Page2" (click)="push()">Go to Tab 1, Page 2</button></p>
+  <p><button ion-button class="e2eGoToTab1Page2" navPush="Tab1Page2">Go to Tab 1, Page 2</button></p>
   <p><button ion-button (click)="logout()">Logout</button></p>
   <p><button ion-button (click)="favoritesTab()">Favorites Tab</button></p>
   <p><button ion-button (click)="goBack()">Go Back</button></p>
   <p>UserId: {{userId}}</p>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/tabs/test/advanced/tab1page2.html b/src/components/tabs/test/advanced/tab1page2.html
index eb0669aa0f..fa5afc8f69 100644
--- a/src/components/tabs/test/advanced/tab1page2.html
+++ b/src/components/tabs/test/advanced/tab1page2.html
@@ -9,9 +9,9 @@
 
 <ion-content padding>
 
-  <p><button ion-button (click)="push()">Go to Tab 1, Page 3</button></p>
-  <p><button ion-button id="backToTab1Page1" (click)="navCtrl.pop()">Back to Tab 1, Page 1</button></p>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <p><button ion-button navPush="Tab1Page3">Go to Tab 1, Page 3</button></p>
+  <p><button ion-button class="e2eBackToTab1Page1" navPop>Back to Tab 1, Page 1</button></p>
+  <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>
diff --git a/src/components/tabs/test/advanced/tab1page3.html b/src/components/tabs/test/advanced/tab1page3.html
index f6dc67eaad..5e52d6cb46 100644
--- a/src/components/tabs/test/advanced/tab1page3.html
+++ b/src/components/tabs/test/advanced/tab1page3.html
@@ -9,8 +9,8 @@
 
 <ion-content padding>
 
-  <p><button ion-button (click)="navCtrl.pop()">Back to Tab 1, Page 2</button></p>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <p><button ion-button navPop>Nav Pop</button></p>
+  <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>
diff --git a/src/components/tabs/test/advanced/tab2page1.html b/src/components/tabs/test/advanced/tab2page1.html
index 8c2d595bc2..cd6d6d5e6b 100644
--- a/src/components/tabs/test/advanced/tab2page1.html
+++ b/src/components/tabs/test/advanced/tab2page1.html
@@ -9,8 +9,8 @@
 
 <ion-content padding>
 
-  <p><button ion-button (click)="push()">Go to Tab 2, Page 2</button></p>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <p><button ion-button navPush="Tab2Page2">Go to Tab 2, Page 2</button></p>
+  <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>
diff --git a/src/components/tabs/test/advanced/tab2page2.html b/src/components/tabs/test/advanced/tab2page2.html
index 0ecc30a35f..97572b232f 100644
--- a/src/components/tabs/test/advanced/tab2page2.html
+++ b/src/components/tabs/test/advanced/tab2page2.html
@@ -9,9 +9,9 @@
 
 <ion-content padding>
 
-  <p><button ion-button (click)="push()">Go to Tab 2, Page 3 (no navbar)</button></p>
-  <p><button ion-button (click)="navCtrl.pop()">Back to Tab 2, Page 1</button></p>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <p><button ion-button navPush="Tab2Page3">Go to Tab 2, Page 3 (no navbar)</button></p>
+  <p><button ion-button navPop>Back to Tab 2, Page 1</button></p>
+  <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>
diff --git a/src/components/tabs/test/advanced/tab2page3.html b/src/components/tabs/test/advanced/tab2page3.html
index 11a7897dcd..42abbfe97a 100644
--- a/src/components/tabs/test/advanced/tab2page3.html
+++ b/src/components/tabs/test/advanced/tab2page3.html
@@ -6,7 +6,7 @@
   <p>No Header.</p>
 
   <p><button ion-button (click)="navCtrl.pop()">Back to Tab 2, Page 2</button></p>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <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>
diff --git a/src/components/tabs/test/advanced/tabs.html b/src/components/tabs/test/advanced/tabs.html
index 53e15a20ce..5abb8ea736 100644
--- a/src/components/tabs/test/advanced/tabs.html
+++ b/src/components/tabs/test/advanced/tabs.html
@@ -1,7 +1,7 @@
 
 <ion-tabs preloadTabs="false" (ionChange)="onTabChange()">
-  <ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params" swipeBackEnabled="true"></ion-tab>
-  <ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
-  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
+  <ion-tab tabTitle="Recents" tabIcon="call" root="Tab1Page1" swipeBackEnabled="true"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star" root="Tab2Page1"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" root="Tab3Page1"></ion-tab>
   <ion-tab tabTitle="Chat" tabIcon="chatbubbles" (ionSelect)="chat()"></ion-tab>
 </ion-tabs>
diff --git a/src/components/tabs/test/badges/app-module.ts b/src/components/tabs/test/badges/app-module.ts
new file mode 100644
index 0000000000..3e2fda7a78
--- /dev/null
+++ b/src/components/tabs/test/badges/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+@Component({template: 'hi'})
+export class E2EPage {}
+
+
+@Component({
+  templateUrl: 'main.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class E2EApp {
+  root = E2EPage;
+  myBadge: number = 55;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/tabs/test/badges/index.ts b/src/components/tabs/test/badges/index.ts
deleted file mode 100644
index cf6fe8e945..0000000000
--- a/src/components/tabs/test/badges/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-@Component({template: 'hi'})
-class E2EPage {}
-
-
-@Component({
-  templateUrl: 'main.html',
-  styleUrls: ['styles.css'],
-  encapsulation: ViewEncapsulation.None
-})
-class E2EApp {
-  root = E2EPage;
-  myBadge: number = 55;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/tabs/test/badges/main.html b/src/components/tabs/test/badges/main.html
index 5d904a9493..81a98aedb7 100644
--- a/src/components/tabs/test/badges/main.html
+++ b/src/components/tabs/test/badges/main.html
@@ -1,3 +1,4 @@
+<div class="e2e-stacked-tabbars">
 
 <!-- Text -->
 <ion-tabs no-navbar>
@@ -66,3 +67,5 @@
   <ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
   <ion-tab [root]="root" tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>
 </ion-tabs>
+
+</div>
\ No newline at end of file
diff --git a/src/components/tabs/test/badges/styles.css b/src/components/tabs/test/badges/styles.css
deleted file mode 100644
index 4855a8f245..0000000000
--- a/src/components/tabs/test/badges/styles.css
+++ /dev/null
@@ -1,12 +0,0 @@
-ion-tabs {
-  margin-bottom: 20px;
-}
-
-ion-tabs,
-ion-tabs ion-tabbar {
-  position: relative;
-  top: auto;
-  height: auto;
-  visibility: visible;
-  opacity: 1;
-}
diff --git a/src/components/tabs/test/basic/index.ts b/src/components/tabs/test/basic/app-module.ts
similarity index 92%
rename from src/components/tabs/test/basic/index.ts
rename to src/components/tabs/test/basic/app-module.ts
index 01167fb135..9341abad45 100644
--- a/src/components/tabs/test/basic/index.ts
+++ b/src/components/tabs/test/basic/app-module.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, App, AlertController, ModalController, ViewController, Tab, Tabs } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, App, AlertController, ModalController, ViewController, Tab, Tabs } from '../../../..';
 
 //
 // Modal
@@ -43,7 +43,7 @@ import { ionicBootstrap, App, AlertController, ModalController, ViewController,
   </ion-content>
   `
 })
-class MyModal {
+export class MyModal {
   items: any[] = [];
 
   constructor(private viewCtrl: ViewController, private app: App) {
@@ -263,4 +263,26 @@ export class E2EApp {
   root = TabsPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    MyModal,
+    Tab1,
+    Tab2,
+    Tab3,
+    TabsPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    MyModal,
+    Tab1,
+    Tab2,
+    Tab3,
+    TabsPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/tabs/test/child-navs/index.ts b/src/components/tabs/test/child-navs/index.ts
deleted file mode 100644
index 2623aebe5f..0000000000
--- a/src/components/tabs/test/child-navs/index.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, NavController, App, Alert, Modal, ViewController, Tab, Tabs } from '../../../../../src';
-
-
-//
-// Tab 1
-//
-@Component({
-  template: `
-  <ion-header>
-    <ion-navbar>
-      <ion-title>
-        Tab 1
-      </ion-title>
-    </ion-navbar>
-  </ion-header>
-
-  <ion-content class="home">
-    <ion-nav [root]="root"></ion-nav>
-  </ion-content>
-    `
-})
-class Tab1 {
-  root = SecondPage;
-}
-
-//
-// Tab 2
-//
-@Component({
-  template: `
-  <ion-header>
-    <ion-navbar>
-      <ion-title>
-        Tab 2
-      </ion-title>
-    </ion-navbar>
-  </ion-header>
-
-  <ion-content class="home">
-    <ion-nav [root]="root"></ion-nav>
-  </ion-content>
-    `
-})
-class Tab2 {
-  root = SecondPage;
-}
-
-//
-// Tab 3
-//
-@Component({
-  template: `
-  <ion-header>
-    <ion-navbar>
-      <ion-title>
-        Tab 3
-      </ion-title>
-    </ion-navbar>
-  </ion-header>
-
-  <ion-content class="home">
-    <ion-nav [root]="root"></ion-nav>
-  </ion-content>
-    `
-})
-class Tab3 {
-  root = SecondPage;
-}
-
-@Component({
-  template: `
-  <ion-content class="home">
-    <div>SecondPage Cmp</div>
-    <ion-nav [root]="root"></ion-nav>
-  </ion-content>
-  `
-})
-class SecondPage {
-  root = ThirdPage;
-}
-
-@Component({
-  template: `
-  <ion-content class="home">
-    <div>ThirdPage Cmp</div>
-    <ion-nav [root]="root"></ion-nav>
-  </ion-content>
-  `
-})
-class ThirdPage {
-  root = FourthPage;
-}
-
-@Component({
-  template: `
-  <ion-header>
-    <ion-navbar>
-      <ion-title>
-        Fourth Page Comp
-      </ion-title>
-    </ion-navbar>
-  </ion-header>
-  <ion-content>
-    <ion-list>
-      <ion-item *ngFor="let item of items">
-        {{item}}
-      </ion-item>
-    </ion-list>
-  </ion-content>
-  `
-})
-class FourthPage {
-  private items: string[];
-
-  ionViewWillEnter() {
-    let items: string[] = [];
-    for ( let i = 0 ; i < 500; i++ ) {
-      items.push(`Item ${(i + 1)}`);
-    }
-    this.items = items;
-  }
-}
-
-
-@Component({
-  template: `
-    <ion-tabs #content>
-      <ion-tab tabTitle="Tab 1" tabIcon="star" [root]="root1"></ion-tab>
-      <ion-tab tabTitle="Tab 2" tabIcon="globe" [root]="root2"></ion-tab>
-      <ion-tab tabTitle="Tab 3" tabIcon="stopwatch" [root]="root3"></ion-tab>
-    </ion-tabs>
-  `
-})
-class TabsPage {
-  root1 = Tab1;
-  root2 = Tab2;
-  root3 = Tab3;
-}
-
-@Component({
-  template: `<ion-nav [root]="root"></ion-nav>`
-})
-class E2EApp {
-  root = TabsPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/tabs/test/colors/app-module.ts b/src/components/tabs/test/colors/app-module.ts
new file mode 100644
index 0000000000..a3e6e94d0d
--- /dev/null
+++ b/src/components/tabs/test/colors/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({template: 'hi'})
+export class E2EPage {}
+
+
+@Component({
+  templateUrl: 'main.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/tabs/test/colors/index.ts b/src/components/tabs/test/colors/index.ts
deleted file mode 100644
index 3dd955b571..0000000000
--- a/src/components/tabs/test/colors/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({template: 'hi'})
-class E2EPage {}
-
-
-@Component({
-  templateUrl: 'main.html',
-  styleUrls: ['styles.css'],
-  encapsulation: ViewEncapsulation.None
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/tabs/test/colors/main.html b/src/components/tabs/test/colors/main.html
index e1b72ef9e1..7c9bcdb78f 100644
--- a/src/components/tabs/test/colors/main.html
+++ b/src/components/tabs/test/colors/main.html
@@ -1,3 +1,4 @@
+<div class="e2e-stacked-tabbars">
 
 <!-- Default -->
 <ion-tabs no-navbar>
@@ -69,3 +70,5 @@
   <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
   <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
 </ion-tabs>
+
+</div>
\ No newline at end of file
diff --git a/src/components/tabs/test/colors/styles.css b/src/components/tabs/test/colors/styles.css
deleted file mode 100644
index 4855a8f245..0000000000
--- a/src/components/tabs/test/colors/styles.css
+++ /dev/null
@@ -1,12 +0,0 @@
-ion-tabs {
-  margin-bottom: 20px;
-}
-
-ion-tabs,
-ion-tabs ion-tabbar {
-  position: relative;
-  top: auto;
-  height: auto;
-  visibility: visible;
-  opacity: 1;
-}
diff --git a/src/components/tabs/test/ghost/index.ts b/src/components/tabs/test/ghost/app-module.ts
similarity index 80%
rename from src/components/tabs/test/ghost/index.ts
rename to src/components/tabs/test/ghost/app-module.ts
index e544c65de8..1a3bbc0132 100644
--- a/src/components/tabs/test/ghost/index.ts
+++ b/src/components/tabs/test/ghost/app-module.ts
@@ -1,5 +1,5 @@
-import { Component, ContentChild, QueryList, ViewChildren } from '@angular/core';
-import { ionicBootstrap, NavController, Tab } from '../../../../../src';
+import { Component, QueryList, ViewChildren, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Tab } from '../../../..';
 
 
 //
@@ -17,7 +17,7 @@ import { ionicBootstrap, NavController, Tab } from '../../../../../src';
     </ion-content>
     `
 })
-class Tab1 {}
+export class Tab1 {}
 
 //
 // Tab 2
@@ -34,7 +34,7 @@ class Tab1 {}
     </ion-content>
     `
 })
-class Tab2 {}
+export class Tab2 {}
 
 //
 // Tab 3
@@ -54,7 +54,7 @@ class Tab2 {}
     </ion-content>
     `
 })
-class Tab3 {}
+export class Tab3 {}
 
 //
 // Tab 3
@@ -74,7 +74,7 @@ class Tab3 {}
     </ion-content>
     `
 })
-class QuesaritoPage {}
+export class QuesaritoPage {}
 
 @Component({
   template: `
@@ -100,7 +100,7 @@ class QuesaritoPage {}
     </ion-tabs>
   `
 })
-class TabsPage {
+export class TabsPage {
   root1 = Tab1;
   root2 = Tab2;
   root3 = Tab3;
@@ -122,4 +122,24 @@ class TabsPage {
 
 }
 
-ionicBootstrap(TabsPage);
+@NgModule({
+  declarations: [
+    Tab1,
+    Tab2,
+    Tab3,
+    QuesaritoPage,
+    TabsPage
+  ],
+  imports: [
+    IonicModule.forRoot(TabsPage)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    Tab1,
+    Tab2,
+    Tab3,
+    QuesaritoPage,
+    TabsPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/tabs/test/tab-bar-scenarios/app-module.ts b/src/components/tabs/test/tab-bar-scenarios/app-module.ts
new file mode 100644
index 0000000000..a3e6e94d0d
--- /dev/null
+++ b/src/components/tabs/test/tab-bar-scenarios/app-module.ts
@@ -0,0 +1,31 @@
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({template: 'hi'})
+export class E2EPage {}
+
+
+@Component({
+  templateUrl: 'main.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/tabs/test/tab-bar-scenarios/index.ts b/src/components/tabs/test/tab-bar-scenarios/index.ts
deleted file mode 100644
index 3dd955b571..0000000000
--- a/src/components/tabs/test/tab-bar-scenarios/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({template: 'hi'})
-class E2EPage {}
-
-
-@Component({
-  templateUrl: 'main.html',
-  styleUrls: ['styles.css'],
-  encapsulation: ViewEncapsulation.None
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/tabs/test/tab-bar-scenarios/main.html b/src/components/tabs/test/tab-bar-scenarios/main.html
index 5d9ba43820..4b1200c64d 100644
--- a/src/components/tabs/test/tab-bar-scenarios/main.html
+++ b/src/components/tabs/test/tab-bar-scenarios/main.html
@@ -1,3 +1,4 @@
+<div class="e2e-stacked-tabbars">
 
 <!-- Text -->
 <ion-tabs no-navbar>
@@ -71,3 +72,5 @@
   <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
   <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
 </ion-tabs>
+
+</div>
\ No newline at end of file
diff --git a/src/components/tabs/test/tab-bar-scenarios/styles.css b/src/components/tabs/test/tab-bar-scenarios/styles.css
deleted file mode 100644
index 4855a8f245..0000000000
--- a/src/components/tabs/test/tab-bar-scenarios/styles.css
+++ /dev/null
@@ -1,12 +0,0 @@
-ion-tabs {
-  margin-bottom: 20px;
-}
-
-ion-tabs,
-ion-tabs ion-tabbar {
-  position: relative;
-  top: auto;
-  height: auto;
-  visibility: visible;
-  opacity: 1;
-}
diff --git a/src/components/tabs/test/tabs.spec.ts b/src/components/tabs/test/tabs.spec.ts
index 219bb84ca1..426c402f50 100644
--- a/src/components/tabs/test/tabs.spec.ts
+++ b/src/components/tabs/test/tabs.spec.ts
@@ -1,37 +1,11 @@
 import { Component } from '@angular/core';
-import { App, Config, Nav, NavOptions, Platform, Tab, Tabs, ViewController } from '../../../../src';
-import { mockTab, mockTabs } from '../../../../src/util/mock-providers';
+import { mockTab, mockTabs } from '../../../util/mock-providers';
 
-export function run() {
 
 describe('Tabs', () => {
 
   describe('initTabs', () => {
 
-    it('should preload all tabs', () => {
-      var tabs = mockTabs();
-      var tab0 = mockTab(tabs);
-      var tab1 = mockTab(tabs);
-      tab0.root = SomePage;
-      tab1.root = SomePage;
-
-      tab0.preload = () => {};
-      tab1.preload = () => {};
-
-      spyOn(tab0, 'preload');
-      spyOn(tab1, 'preload');
-
-      tabs.preloadTabs = true;
-
-      tabs.initTabs();
-
-      expect(tab0.isSelected).toEqual(true);
-      expect(tab1.isSelected).toEqual(false);
-
-      expect(tab0.preload).not.toHaveBeenCalled();
-      expect(tab1.preload).toHaveBeenCalled();
-    });
-
     it('should not select a hidden or disabled tab', () => {
       var tabs = mockTabs();
       var tab0 = mockTab(tabs);
@@ -42,7 +16,7 @@ describe('Tabs', () => {
       tab1.enabled = false;
       tab1.show = false;
 
-      tabs.selectedIndex = '1';
+      tabs.selectedIndex = 1;
       tabs.initTabs();
 
       expect(tab0.isSelected).toEqual(true);
@@ -56,7 +30,7 @@ describe('Tabs', () => {
       tab0.root = SomePage;
       tab1.root = SomePage;
 
-      tabs.selectedIndex = '1';
+      tabs.selectedIndex = 1;
       tabs.initTabs();
 
       expect(tab0.isSelected).toEqual(false);
@@ -70,16 +44,10 @@ describe('Tabs', () => {
       tab0.root = SomePage;
       tab1.root = SomePage;
 
-      spyOn(tab0, 'preload');
-      spyOn(tab1, 'preload');
-
       tabs.initTabs();
 
       expect(tab0.isSelected).toEqual(true);
       expect(tab1.isSelected).toEqual(false);
-
-      expect(tab0.preload).not.toHaveBeenCalled();
-      expect(tab1.preload).not.toHaveBeenCalled();
     });
 
   });
@@ -99,13 +67,13 @@ describe('Tabs', () => {
       tabs.select(tab1);
       tabs.select(tab2);
 
-      expect(tabs.selectHistory).toEqual([tab0.id, tab1.id, tab2.id]);
+      expect(tabs._selectHistory).toEqual([tab0.id, tab1.id, tab2.id]);
 
       expect(tabs.previousTab(true)).toEqual(tab1);
-      expect(tabs.selectHistory).toEqual([tab0.id, tab1.id]);
+      expect(tabs._selectHistory).toEqual([tab0.id, tab1.id]);
 
       expect(tabs.previousTab(true)).toEqual(tab0);
-      expect(tabs.selectHistory).toEqual([tab0.id]);
+      expect(tabs._selectHistory).toEqual([tab0.id]);
     });
 
     it('should not find a previous tab when there has only been one selection', () => {
@@ -122,7 +90,7 @@ describe('Tabs', () => {
 
     it('should not find a previous tab when theres no history', () => {
       var tabs = mockTabs();
-      expect(tabs.selectHistory.length).toEqual(0);
+      expect(tabs._selectHistory.length).toEqual(0);
       expect(tabs.previousTab(true)).toEqual(null);
     });
 
@@ -133,22 +101,22 @@ describe('Tabs', () => {
       tab0.root = SomePage;
       tab1.root = SomePage;
 
-      expect(tabs.selectHistory.length).toEqual(0);
+      expect(tabs._selectHistory.length).toEqual(0);
 
       tabs.select(tab0);
-      expect(tabs.selectHistory[0]).toEqual(tab0.id);
-      expect(tabs.selectHistory.length).toEqual(1);
+      expect(tabs._selectHistory[0]).toEqual(tab0.id);
+      expect(tabs._selectHistory.length).toEqual(1);
 
       tabs.select(tab1);
-      expect(tabs.selectHistory[0]).toEqual(tab0.id);
-      expect(tabs.selectHistory[1]).toEqual(tab1.id);
-      expect(tabs.selectHistory.length).toEqual(2);
+      expect(tabs._selectHistory[0]).toEqual(tab0.id);
+      expect(tabs._selectHistory[1]).toEqual(tab1.id);
+      expect(tabs._selectHistory.length).toEqual(2);
 
       tabs.select(tab0);
-      expect(tabs.selectHistory[0]).toEqual(tab0.id);
-      expect(tabs.selectHistory[1]).toEqual(tab1.id);
-      expect(tabs.selectHistory[2]).toEqual(tab0.id);
-      expect(tabs.selectHistory.length).toEqual(3);
+      expect(tabs._selectHistory[0]).toEqual(tab0.id);
+      expect(tabs._selectHistory[1]).toEqual(tab1.id);
+      expect(tabs._selectHistory[2]).toEqual(tab0.id);
+      expect(tabs._selectHistory.length).toEqual(3);
     });
 
   });
@@ -207,7 +175,7 @@ describe('Tabs', () => {
 
     it('should get the selected tab', () => {
       var tabs = mockTabs();
-      var tab0 = mockTab(tabs);
+      mockTab(tabs);
       var tab1 = mockTab(tabs);
 
       tab1.setSelected(true);
@@ -217,8 +185,8 @@ describe('Tabs', () => {
 
     it('should get null if no selected tab', () => {
       var tabs = mockTabs();
-      var tab0 = mockTab(tabs);
-      var tab1 = mockTab(tabs);
+      mockTab(tabs);
+      mockTab(tabs);
 
       expect(tabs.getSelected()).toEqual(null);
     });
@@ -229,6 +197,3 @@ describe('Tabs', () => {
   class SomePage {}
 
 });
-
-
-}
diff --git a/src/components/tap-click/test/tapClick.spec.ts b/src/components/tap-click/test/tapClick.spec.ts
index 738d295b35..87aee2e9af 100644
--- a/src/components/tap-click/test/tapClick.spec.ts
+++ b/src/components/tap-click/test/tapClick.spec.ts
@@ -1,44 +1,40 @@
-import { isActivatable } from '../../../../src';
+import { isActivatable } from '../tap-click';
 
-export function run() {
+describe('TapClick', () => {
 
-  describe('TapClick', () => {
+  describe('isActivatable', () => {
 
-    describe('isActivatable', () => {
+    it('should be activatable on <a> element', () => {
+      let ele = document.createElement('a');
+      expect( isActivatable(ele) ).toBe(true);
+    });
 
-      it('should be activatable on <a> element', () => {
-        let ele = document.createElement('a');
-        expect( isActivatable(ele) ).toBe(true);
-      });
+    it('should be activatable on <button> element', () => {
+      let ele = document.createElement('button');
+      expect( isActivatable(ele) ).toBe(true);
+    });
 
-      it('should be activatable on <button> element', () => {
-        let ele = document.createElement('button');
-        expect( isActivatable(ele) ).toBe(true);
-      });
+    it('should be activatable on <ion-item-sliding> element', () => {
+      let ele = document.createElement('ion-item-sliding');
+      expect( isActivatable(ele) ).toBe(false);
+    });
 
-      it('should be activatable on <ion-item-sliding> element', () => {
-        let ele = document.createElement('ion-item-sliding');
-        expect( isActivatable(ele) ).toBe(false);
-      });
+    it('should be not activatable on <ion-item> element', () => {
+      let ele = document.createElement('ion-item');
+      expect( isActivatable(ele) ).toBe(false);
+    });
 
-      it('should be not activatable on <ion-item> element', () => {
-        let ele = document.createElement('ion-item');
-        expect( isActivatable(ele) ).toBe(false);
-      });
-
-      it('should be not activatable on <div> element', () => {
-        let ele = document.createElement('div');
-        expect( isActivatable(ele) ).toBe(false);
-      });
-
-      it('should be activatable with "tappable" attribute', () => {
-        let ele = document.createElement('div');
-        ele.setAttribute('tappable', 'true');
-        expect( isActivatable(ele) ).toBe(true);
-      });
+    it('should be not activatable on <div> element', () => {
+      let ele = document.createElement('div');
+      expect( isActivatable(ele) ).toBe(false);
+    });
 
+    it('should be activatable with "tappable" attribute', () => {
+      let ele = document.createElement('div');
+      ele.setAttribute('tappable', 'true');
+      expect( isActivatable(ele) ).toBe(true);
     });
 
   });
 
-}
+});
diff --git a/src/components/toast/test/basic/index.ts b/src/components/toast/test/basic/app-module.ts
similarity index 80%
rename from src/components/toast/test/basic/index.ts
rename to src/components/toast/test/basic/app-module.ts
index f43774e3fa..7a44a06b4b 100644
--- a/src/components/toast/test/basic/index.ts
+++ b/src/components/toast/test/basic/app-module.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, Toast, ToastController, NavController } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Toast, ToastController, NavController } from '../../../..';
 
 
 @Component({
@@ -14,13 +14,13 @@ import { ionicBootstrap, Toast, ToastController, NavController } from '../../../
     </ion-content>
   `
 })
-class AnotherPage {}
+export class AnotherPage {}
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
 
   constructor(public toastCtrl: ToastController, public navCtrl: NavController) { }
 
@@ -84,8 +84,24 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage,
+    AnotherPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage,
+    AnotherPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/toast/test/toast.spec.ts b/src/components/toast/test/toast.spec.ts
index e87d56e03f..f8f0374c85 100644
--- a/src/components/toast/test/toast.spec.ts
+++ b/src/components/toast/test/toast.spec.ts
@@ -1,6 +1,7 @@
-import { ToastController, App, Platform, Config } from '../../../../src';
-
-export function run() {
+import { App } from '../../app/app';
+import { Config } from '../../../config/config';
+import { Platform } from '../../../platform/platform';
+import { ToastController } from '../../toast/toast';
 
 describe('Toast', () => {
 
@@ -63,5 +64,3 @@ describe('Toast', () => {
   });
 
 });
-
-}
diff --git a/src/components/toggle/test/basic/index.ts b/src/components/toggle/test/basic/app-module.ts
similarity index 62%
rename from src/components/toggle/test/basic/index.ts
rename to src/components/toggle/test/basic/app-module.ts
index 7135724c9a..d9f511ac96 100644
--- a/src/components/toggle/test/basic/index.ts
+++ b/src/components/toggle/test/basic/app-module.ts
@@ -1,27 +1,31 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { ionicBootstrap, Toggle } from '../../../../../src';
+import { IonicApp, IonicModule, Toggle } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
-  fruitsForm: FormGroup;
+export class E2EPage {
   grapeDisabled: boolean;
   grapeChecked: boolean;
   kiwiValue: boolean;
   strawberryValue: boolean;
   formResults: string;
 
-  constructor() {
-    this.fruitsForm = new FormGroup({
-      'appleCtrl': new FormControl(false),
-      'bananaCtrl': new FormControl(true),
-      'cherryCtrl': new FormControl(false),
-      'grapeCtrl': new FormControl(true)
-    });
+  appleCtrl = new FormControl(false);
+  bananaCtrl = new FormControl(true);
+  cherryCtrl = new FormControl(false);
+  grapeCtrl = new FormControl(true);
 
+  fruitsForm = new FormGroup({
+    'apple': this.appleCtrl,
+    'banana': this.bananaCtrl,
+    'cherry': this.cherryCtrl,
+    'grape': this.grapeCtrl
+  });
+
+  constructor() {
     this.grapeChecked = true;
     this.grapeDisabled = true;
   }
@@ -62,8 +66,22 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp);
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/toggle/test/basic/e2e.ts b/src/components/toggle/test/basic/e2e.ts
index bdd776a068..498bf38618 100644
--- a/src/components/toggle/test/basic/e2e.ts
+++ b/src/components/toggle/test/basic/e2e.ts
@@ -1,6 +1,6 @@
 
 it('should check apple via switch element click', function() {
-  element(by.css('[formControlName="appleCtrl"]')).click();
+  element(by.css('[formControlName="apple"]')).click();
 });
 
 
diff --git a/src/components/toggle/test/basic/main.html b/src/components/toggle/test/basic/main.html
index 5c8768542d..af69cced18 100644
--- a/src/components/toggle/test/basic/main.html
+++ b/src/components/toggle/test/basic/main.html
@@ -25,22 +25,22 @@
 
       <ion-item>
         <ion-label>Apple, formControlName</ion-label>
-        <ion-toggle formControlName="appleCtrl" (ionChange)="appleChange($event)"></ion-toggle>
+        <ion-toggle formControlName="apple" (ionChange)="appleChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
         <ion-label>Banana, formControlName</ion-label>
-        <ion-toggle formControlName="bananaCtrl" (ionChange)="bananaChange($event)"></ion-toggle>
+        <ion-toggle formControlName="banana" (ionChange)="bananaChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
         <ion-label>Cherry, formControlName, disabled</ion-label>
-        <ion-toggle disabled="true" formControlName="cherryCtrl"></ion-toggle>
+        <ion-toggle disabled="true" formControlName="cherry"></ion-toggle>
       </ion-item>
 
       <ion-item>
         <ion-label>Grape, formControlName, checked, disabled</ion-label>
-        <ion-toggle [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grapeCtrl"></ion-toggle>
+        <ion-toggle [checked]="grapeChecked" [disabled]="grapeDisabled" formControlName="grape"></ion-toggle>
       </ion-item>
 
       <ion-item>
@@ -64,14 +64,14 @@
   </p>
 
   <p aria-hidden="true" padding>
-    <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
-    <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
-    <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
-    <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
-    <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
-    <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
-    <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
-    <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
+    <code>appleCtrl.dirty: {{appleCtrl.dirty}}</code><br>
+    <code>appleCtrl.value: {{appleCtrl.value}}</code><br>
+    <code>bananaCtrl.dirty: {{bananaCtrl.dirty}}</code><br>
+    <code>bananaCtrl.value: {{bananaCtrl.value}}</code><br>
+    <code>cherryCtrl.dirty: {{cherryCtrl.dirty}}</code><br>
+    <code>cherryCtrl.value: {{cherryCtrl.value}}</code><br>
+    <code>grapeCtrl.dirty: {{grapeCtrl.dirty}}</code><br>
+    <code>grapeCtrl.value: {{grapeCtrl.value}}</code><br>
     <code>kiwiValue: {{kiwiValue}}</code><br>
     <code>strawberryValue: {{strawberryValue}}</code><br>
   </p>
diff --git a/src/components/toolbar/test/colors/app-module.ts b/src/components/toolbar/test/colors/app-module.ts
new file mode 100644
index 0000000000..325ef37c2a
--- /dev/null
+++ b/src/components/toolbar/test/colors/app-module.ts
@@ -0,0 +1,28 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EApp {
+
+  buttonClick(button: any) {
+    console.log(button);
+  }
+
+}
+
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/toolbar/test/colors/index.ts b/src/components/toolbar/test/colors/index.ts
deleted file mode 100644
index 48c3ab3ed3..0000000000
--- a/src/components/toolbar/test/colors/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EApp {
-
-  buttonClick(button: any) {
-    console.log(button);
-  }
-
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/toolbar/test/scenarios/app-module.ts b/src/components/toolbar/test/scenarios/app-module.ts
new file mode 100644
index 0000000000..ef63fef867
--- /dev/null
+++ b/src/components/toolbar/test/scenarios/app-module.ts
@@ -0,0 +1,28 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EApp {
+
+  buttonClick(button) {
+    console.log(button);
+  }
+
+}
+
+@NgModule({
+  declarations: [
+    E2EApp
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp
+  ]
+})
+export class AppModule {}
diff --git a/src/components/toolbar/test/scenarios/index.ts b/src/components/toolbar/test/scenarios/index.ts
deleted file mode 100644
index 55285ce2d4..0000000000
--- a/src/components/toolbar/test/scenarios/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EApp {
-
-  buttonClick(button) {
-    console.log(button);
-  }
-
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/typography/test/basic/app-module.ts b/src/components/typography/test/basic/app-module.ts
new file mode 100644
index 0000000000..33f7340164
--- /dev/null
+++ b/src/components/typography/test/basic/app-module.ts
@@ -0,0 +1,33 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  dynamicColor: string = 'secondary';
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/typography/test/basic/index.ts b/src/components/typography/test/basic/index.ts
deleted file mode 100644
index 1e198402b1..0000000000
--- a/src/components/typography/test/basic/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap, App } from '../../../../../src';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class E2EPage {
-  dynamicColor: string = "secondary";
-
-  constructor(app: App) {
-    app.setTitle('Basic Buttons');
-  }
-}
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class E2EApp {
-  root = E2EPage;
-}
-
-ionicBootstrap(E2EApp);
diff --git a/src/components/typography/test/basic/main.html b/src/components/typography/test/basic/main.html
index 72b2fa85b6..9cf4179e38 100644
--- a/src/components/typography/test/basic/main.html
+++ b/src/components/typography/test/basic/main.html
@@ -26,6 +26,7 @@
     Walking through the <sub color="danger">streets</sub> of Soho in the rain.
     He <i color="primary">was</i> looking for a place called Lee Ho Fook's.
     Gonna get a <a color="secondary">big dish of beef chow mein.</a>
+    <a class="color-purple">My purple class link.</a>
   </p>
 
   <p>
@@ -38,3 +39,9 @@
   </p>
 
 </ion-content>
+
+<style>
+  .color-purple {
+    color: purple;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/virtual-scroll/test/basic/index.ts b/src/components/virtual-scroll/test/basic/app-module.ts
similarity index 65%
rename from src/components/virtual-scroll/test/basic/index.ts
rename to src/components/virtual-scroll/test/basic/app-module.ts
index f17bb3a9e3..6e039589ae 100644
--- a/src/components/virtual-scroll/test/basic/index.ts
+++ b/src/components/virtual-scroll/test/basic/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild, ElementRef } from '@angular/core';
-import { ionicBootstrap, Platform } from '../../../../../src';
+import { Component, ViewChild, ElementRef, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Platform } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   items: any[] = [];
   webview: string;
 
@@ -49,10 +49,25 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp, null, {
-  prodMode: true
-});
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, {
+      prodMode: true
+    })
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/virtual-scroll/test/cards/index.ts b/src/components/virtual-scroll/test/cards/app-module.ts
similarity index 78%
rename from src/components/virtual-scroll/test/cards/index.ts
rename to src/components/virtual-scroll/test/cards/app-module.ts
index 5edca67c1a..6690f2a8b5 100644
--- a/src/components/virtual-scroll/test/cards/index.ts
+++ b/src/components/virtual-scroll/test/cards/app-module.ts
@@ -1,12 +1,12 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html',
   encapsulation: ViewEncapsulation.None
 })
-class E2EPage {
+export class E2EPage {
   items: any[] = [];
 
   constructor() {
@@ -30,13 +30,28 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>',
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp, null, {
-  prodMode: true
-});
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, {
+      prodMode: true
+    })
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
 
 const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
diff --git a/src/components/virtual-scroll/test/image-gallery/index.ts b/src/components/virtual-scroll/test/image-gallery/app-module.ts
similarity index 81%
rename from src/components/virtual-scroll/test/image-gallery/index.ts
rename to src/components/virtual-scroll/test/image-gallery/app-module.ts
index 89f74c7dd7..dc4ce8510b 100644
--- a/src/components/virtual-scroll/test/image-gallery/index.ts
+++ b/src/components/virtual-scroll/test/image-gallery/app-module.ts
@@ -1,12 +1,12 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html',
   encapsulation: ViewEncapsulation.None
 })
-class E2EPage {
+export class E2EPage {
   lastMonth: number;
   items = [];
 
@@ -76,13 +76,28 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>',
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp, null, {
-  prodMode: true
-});
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, {
+      prodMode: true
+    })
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
 
 var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
diff --git a/src/components/virtual-scroll/test/sliding-item/index.ts b/src/components/virtual-scroll/test/sliding-item/app-module.ts
similarity index 65%
rename from src/components/virtual-scroll/test/sliding-item/index.ts
rename to src/components/virtual-scroll/test/sliding-item/app-module.ts
index f17bb3a9e3..6e039589ae 100644
--- a/src/components/virtual-scroll/test/sliding-item/index.ts
+++ b/src/components/virtual-scroll/test/sliding-item/app-module.ts
@@ -1,11 +1,11 @@
-import { Component, ViewChild, ElementRef } from '@angular/core';
-import { ionicBootstrap, Platform } from '../../../../../src';
+import { Component, ViewChild, ElementRef, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Platform } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   items: any[] = [];
   webview: string;
 
@@ -49,10 +49,25 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp, null, {
-  prodMode: true
-});
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, {
+      prodMode: true
+    })
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/virtual-scroll/test/variable-size/index.ts b/src/components/virtual-scroll/test/variable-size/app-module.ts
similarity index 57%
rename from src/components/virtual-scroll/test/variable-size/index.ts
rename to src/components/virtual-scroll/test/variable-size/app-module.ts
index b69a110c97..1b923d9e5e 100644
--- a/src/components/virtual-scroll/test/variable-size/index.ts
+++ b/src/components/virtual-scroll/test/variable-size/app-module.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
-import { ionicBootstrap } from '../../../../../src';
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class E2EPage {
+export class E2EPage {
   items: any[] = [];
 
   constructor() {
@@ -34,10 +34,25 @@ class E2EPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>',
 })
-class E2EApp {
+export class E2EApp {
   root = E2EPage;
 }
 
-ionicBootstrap(E2EApp, null, {
-  prodMode: true
-});
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, {
+      prodMode: true
+    })
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/virtual-scroll/test/virtual-scroll.spec.ts b/src/components/virtual-scroll/test/virtual-scroll.spec.ts
index dc619cf235..eadfb8010d 100644
--- a/src/components/virtual-scroll/test/virtual-scroll.spec.ts
+++ b/src/components/virtual-scroll/test/virtual-scroll.spec.ts
@@ -1,15 +1,11 @@
-import { VirtualScroll } from '../../../../src/components/virtual-scroll/virtual-scroll';
-import { VirtualCell, VirtualData, VirtualNode } from '../../../../src/components/virtual-scroll/virtual-util';
-import { processRecords, populateNodeData, initReadNodes, getVirtualHeight, adjustRendered } from '../../../../src/components/virtual-scroll/virtual-util';
+import { VirtualCell, VirtualData, VirtualNode } from '../virtual-util';
+import { processRecords, populateNodeData, initReadNodes, getVirtualHeight, adjustRendered } from '../virtual-util';
 
 
-
-export function run() {
-
 describe('VirtualScroll', () => {
 
   beforeEach(() => {
-    records = [0,1,2,3,4,5,6,7,8,9];
+    records = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
     cells = [];
     nodes = [];
     headerFn = null;
@@ -31,7 +27,7 @@ describe('VirtualScroll', () => {
         marginRight: '0px',
         marginBottom: '0px',
         marginLeft: '0px'
-      }
+      };
       return styles;
     };
   });
@@ -39,7 +35,7 @@ describe('VirtualScroll', () => {
   describe('processRecords', () =>  {
 
     it('should load data for 100% width items', () => {
-      records = [0,1,2,3,4]
+      records = [0, 1, 2, 3, 4];
       let stopAtHeight = 200;
 
       processRecords(stopAtHeight, records, cells,
@@ -68,7 +64,7 @@ describe('VirtualScroll', () => {
     });
 
     it('should load data for 30% width items', () => {
-      records = [0,1,2,3,4];
+      records = [0, 1, 2, 3, 4];
       let stopAtHeight = 1000;
       data.viewWidth = 300;
       data.itmWidth = 90; // 30%, 3 per row
@@ -153,7 +149,7 @@ describe('VirtualScroll', () => {
     });
 
     it('should process more data', () => {
-      records = [0,1,2,3,4,5,6,7,8,9];
+      records = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
       let stopAtHeight = 100;
       data.viewWidth = 200;
       data.itmWidth = 90; // 2 per row
@@ -534,7 +530,7 @@ describe('VirtualScroll', () => {
     }
   };
 
-  function getView(width?:number, height?: number, top?: number, left?: number): any {
+  function getView(width?: number, height?: number, top?: number, left?: number): any {
     return {
       context: {},
       rootNodes: [{
@@ -556,13 +552,11 @@ describe('VirtualScroll', () => {
         setAttribute: function(){},
         innerHTML: '',
       }]
-    }
+    };
   }
 
 });
 
-}
-
 const TEMPLATE_ITEM = 0;
 const TEMPLATE_HEADER = 1;
 const TEMPLATE_FOOTER = 2;