refactor(): restructure components to loosen coupling, move overlay-portal, click-block, menu-controller and other app-level functionality to app directory. The motivation for this change is logical grouping, decoupling components from each other, and improving the ability to drop more unused components from bundle

src/components/action-sheet/action-sheet.module.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ButtonModule } from '../button/button.module';
-import { BackdropModule } from '../backdrop/backdrop.module';
-import { IconModule } from '../icon/icon.module';
-
-import { ActionSheetCmp } from './action-sheet-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule,
-    ButtonModule,
-    CommonModule,
-    IconModule
-  ],
-  declarations: [
-    ActionSheetCmp
-  ],
-  exports: [
-    ActionSheetCmp
-  ],
-  entryComponents: [
-    ActionSheetCmp
-  ]
-})
-export class ActionSheetModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ActionSheetModule, providers: []
-    };
-  }
-}

src/components/alert/alert.module.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ButtonModule } from '../button/button.module';
-import { BackdropModule } from '../backdrop/backdrop.module';
-
-import { AlertCmp } from './alert-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule,
-    ButtonModule,
-    CommonModule,
-    FormsModule
-  ],
-  declarations: [
-    AlertCmp
-  ],
-  exports: [
-    AlertCmp
-  ],
-  entryComponents: [
-    AlertCmp
-  ]
-})
-export class AlertModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AlertModule, providers: []
-    };
-  }
-}

src/components/app/app-root.ts

@@ -4,7 +4,7 @@ import { App } from './app';
 import { assert } from '../../util/util';
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
-import { OverlayPortal } from '../nav/overlay-portal';
+import { OverlayPortal } from './overlay-portal';
 import { Platform } from '../../platform/platform';
 import * as Constants from './app-constants';
 
@@ -42,7 +42,7 @@ export class IonicApp extends Ion implements OnInit {
     private _plt: Platform,
     app: App
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'app-root');
     // register with App that this is Ionic's appRoot component. tada!
     app._appRoot = this;
     this._stopScrollPlugin = (<any>window)['IonicStopScroll'];

src/components/app/app.module.ts

@@ -1,28 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { IonicApp } from './app-root';
-
-import { NavModule } from '../nav/nav.module';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    NavModule
-  ],
-  declarations: [
-    IonicApp
-  ],
-  exports: [
-    IonicApp
-  ],
-  entryComponents: [
-    IonicApp
-  ]
-})
-export class AppModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AppModule, providers: []
-    };
-  }
-}

src/components/app/app.ts

@@ -3,11 +3,11 @@ import { Title, DOCUMENT } from '@angular/platform-browser';
 
 import { IonicApp } from './app-root';
 import * as Constants from './app-constants';
-import { ClickBlock } from '../click-block/click-block';
+import { ClickBlock } from './click-block';
 import { runInDev } from '../../util/util';
 import { Config } from '../../config/config';
 import { isNav, NavOptions, DIRECTION_FORWARD, DIRECTION_BACK } from '../../navigation/nav-util';
-import { MenuController } from '../menu/menu-controller';
+import { MenuController } from './menu-controller';
 import { NavController } from '../../navigation/nav-controller';
 import { Platform } from '../../platform/platform';
 import { ViewController } from '../../navigation/view-controller';

src/components/app/menu-controller.ts

@@ -1,5 +1,4 @@
-import { Menu } from './menu';
-import { MenuType } from './menu-types';
+import { Menu, MenuType } from './menu-interface';
 import { Platform } from '../../platform/platform';
 import { removeArrayItem, assert } from '../../util/util';
 
@@ -343,3 +342,5 @@ export class MenuController {
 }
 
 let menuTypes: { [name: string]: new(...args: any[]) => MenuType } = {};
+
+

src/components/app/menu-interface.ts

@@ -0,0 +1,31 @@
+import { Animation } from '../../animations/animation';
+
+export interface Menu {
+  setOpen(shouldOpen: boolean, animated: boolean): Promise<boolean>;
+  open(): Promise<boolean>;
+  close(): Promise<boolean>;
+  toggle(): Promise<boolean>;
+  enable(shouldEnable: boolean, menuId?: string): Menu;
+  swipeEnable(shouldEnable: boolean): Menu;
+  isOpen: boolean;
+  enabled: boolean;
+  side: string;
+  id: string;
+  isAnimating(): boolean;
+  width(): number;
+  getContentElement(): HTMLElement;
+  getMenuElement(): HTMLElement;
+  getBackdropElement(): HTMLElement;
+  _canOpen(): boolean;
+  persistent: boolean;
+};
+
+export interface MenuType {
+  ani: Animation;
+  isOpening: boolean;
+  setOpen(shouldOpen: boolean, animated: boolean, done: Function): void;
+  setProgressStart(isOpen: boolean): void;
+  setProgessStep(stepValue: number): void;
+  setProgressEnd(shouldComplete: boolean, currentStepValue: number, velocity: number, done: Function): void;
+  destroy(): void;
+};

src/components/app/overlay-portal.ts

@@ -1,6 +1,6 @@
 import { ComponentFactoryResolver, Directive, ElementRef, ErrorHandler, forwardRef, Inject, Input, NgZone, Optional, Renderer, ViewContainerRef } from '@angular/core';
 
-import { App } from '../app/app';
+import { App } from './app';
 import { Config } from '../../config/config';
 import { DeepLinker } from '../../navigation/deep-linker';
 import { DomController } from '../../platform/dom-controller';
@@ -55,4 +55,3 @@ export class OverlayPortal extends NavControllerBase {
   }
 
 }
-

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

@@ -1,8 +1,8 @@
 import { App } from '../app';
-import { ClickBlock } from '../../click-block/click-block';
+import { ClickBlock } from '../click-block';
 import { Config } from '../../../config/config';
 import { mockApp, mockConfig, mockElementRef, mockNavController, mockPlatform, MockPlatform, mockRenderer, mockTab, mockTabs, mockView, mockViews } from '../../../util/mock-providers';
-import { OverlayPortal } from '../../nav/overlay-portal';
+import { OverlayPortal } from '../overlay-portal';
 import { PORTAL_MODAL } from '../app-constants';
 
 

src/components/avatar/avatar.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Avatar } from './avatar';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Avatar
-  ],
-  exports: [
-    Avatar
-  ]
-})
-export class AvatarModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AvatarModule, providers: []
-    };
-  }
-}

src/components/avatar/avatar.ts

@@ -12,5 +12,6 @@ import { Directive } from '@angular/core';
   selector: 'ion-avatar'
 })
 export class Avatar {
-
+  constructor() {
+  }
 }

src/components/backdrop/backdrop.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Backdrop } from './backdrop';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Backdrop
-  ],
-  exports: [
-    Backdrop
-  ]
-})
-export class BackdropModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: BackdropModule, providers: []
-    };
-  }
-}

src/components/backdrop/backdrop.ts

@@ -12,11 +12,8 @@ import { Directive, ElementRef, Renderer } from '@angular/core';
   },
 })
 export class Backdrop {
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer
-  ) { }
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
+  }
 
   getNativeElement(): HTMLElement {
     return this._elementRef.nativeElement;

src/components/badge/badge.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Badge } from './badge';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Badge
-  ],
-  exports: [
-    Badge
-  ]
-})
-export class BadgeModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: BadgeModule, providers: []
-    };
-  }
-}

src/components/badge/badge.ts

@@ -19,5 +19,4 @@ export class Badge extends Ion {
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
     super(config, elementRef, renderer, 'badge');
   }
-
 }

src/components/button/button.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Button } from './button';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Button
-  ],
-  exports: [
-    Button
-  ]
-})
-export class ButtonModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ButtonModule, providers: []
-    };
-  }
-}

src/components/card/card.module.ts

@@ -1,29 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Card } from './card';
-import { CardContent } from './card-content';
-import { CardHeader } from './card-header';
-import { CardTitle } from './card-title';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle
-  ],
-  exports: [
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle
-  ]
-})
-export class CardModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: CardModule, providers: []
-    };
-  }
-}

src/components/checkbox/checkbox.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Checkbox } from './checkbox';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Checkbox
-  ],
-  exports: [
-    Checkbox
-  ]
-})
-export class CheckboxModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: CheckboxModule, providers: []
-    };
-  }
-}

src/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Config } from '../../config/config';
@@ -7,12 +7,6 @@ import { Form, IonicTapInput } from '../../util/form';
 import { BaseInput } from '../../util/base-input';
 import { Item } from '../item/item';
 
-export const CHECKBOX_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => Checkbox),
-  multi: true
-};
-
 /**
  * @name Checkbox
  * @module ionic
@@ -69,7 +63,7 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
   host: {
     '[class.checkbox-disabled]': '_disabled'
   },
-  providers: [CHECKBOX_VALUE_ACCESSOR],
+  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Checkbox, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
 export class Checkbox extends BaseInput<boolean> implements IonicTapInput, AfterViewInit, OnDestroy {

src/components/chip/chip.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Chip } from './chip';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Chip
-  ],
-  exports: [
-    Chip
-  ]
-})
-export class ChipModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ChipModule, providers: []
-    };
-  }
-}

src/components/click-block/click-block.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ClickBlock } from './click-block';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    ClickBlock
-  ],
-  exports: [
-    ClickBlock
-  ]
-})
-export class ClickBlockModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ClickBlockModule, providers: []
-    };
-  }
-}

src/components/content/content.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Content } from './content';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Content
-  ],
-  exports: [
-    Content
-  ]
-})
-export class ContentModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ContentModule, providers: []
-    };
-  }
-}

src/components/content/content.ts

@@ -3,15 +3,15 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmi
 import { App } from '../app/app';
 import { Config } from '../../config/config';
 import { DomController } from '../../platform/dom-controller';
-import { Img } from '../img/img';
+import { Img } from '../img/img-interface';
 import { Ion } from '../ion';
 import { isTabs } from '../../navigation/nav-util';
 import { isTrueProperty, assert, removeArrayItem } from '../../util/util';
 import { Keyboard } from '../../platform/keyboard';
 import { NavController } from '../../navigation/nav-controller';
+import { Content as IContent, Tabs } from '../../navigation/nav-interfaces';
 import { Platform } from '../../platform/platform';
 import { ScrollView, ScrollEvent } from '../../util/scroll-view';
-import { Tabs } from '../tabs/tabs';
 import { ViewController } from '../../navigation/view-controller';
 
 export { ScrollEvent } from '../../util/scroll-view';
@@ -135,7 +135,7 @@ export class EventEmitterProxy<T> extends EventEmitter<T> {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class Content extends Ion implements OnDestroy, AfterViewInit {
+export class Content extends Ion implements OnDestroy, AfterViewInit, IContent {
   /** @internal */
   _cTop: number;
   /** @internal */

src/components/datetime/datetime.module.ts

@@ -1,24 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { DateTime } from './datetime';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    DateTime
-  ],
-  exports: [
-    DateTime
-  ]
-})
-export class DateTimeModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: DateTimeModule, providers: []
-    };
-  }
-}

src/components/datetime/datetime.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Config } from '../../config/config';
@@ -11,12 +11,6 @@ import { Item } from '../item/item';
 import { deepCopy, isBlank, isPresent, isArray, isString, assert, clamp } from '../../util/util';
 import { dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, daysInMonth, dateSortValue, dateDataSortValue, LocaleData } from '../../util/datetime-util';
 
-export const DATETIME_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => DateTime),
-  multi: true
-};
-
 /**
  * @name DateTime
  * @description
@@ -270,7 +264,7 @@ export const DATETIME_VALUE_ACCESSOR: any = {
   host: {
     '[class.datetime-disabled]': '_disabled'
   },
-  providers: [DATETIME_VALUE_ACCESSOR],
+  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: DateTime, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
 export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit, ControlValueAccessor, OnDestroy {

src/components/fab/fab.md.scss

@@ -36,6 +36,10 @@ $fab-md-list-button-transition-timing-function:   ease !default;
 /// @prop - Transition delay of the transform and opacity of the button in a list
 $fab-md-list-button-transition-delay:             10ms !default;
 
+$fab-button-md-transition-duration:               300ms !default;
+
+$fab-button-md-transition-timing-function:     cubic-bezier(.4, 0, .2, 1) !default;
+
 
 .fab-md {
   color: $fab-md-text-color;
@@ -43,9 +47,9 @@ $fab-md-list-button-transition-delay:             10ms !default;
 
   box-shadow: $fab-md-box-shadow;
 
-  transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
-              background-color $button-md-transition-duration $button-md-transition-timing-function,
-              color $button-md-transition-duration $button-md-transition-timing-function;
+  transition: box-shadow $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
+              background-color $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
+              color $fab-button-md-transition-duration $fab-button-md-transition-timing-function;
 }
 
 .fab-md.activated {
@@ -59,9 +63,9 @@ $fab-md-list-button-transition-delay:             10ms !default;
 
   transition: transform $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
               opacity $fab-md-list-button-transition-duration $fab-md-list-button-transition-timing-function $fab-md-list-button-transition-delay,
-              box-shadow $button-md-transition-duration $button-md-transition-timing-function,
-              background-color $button-md-transition-duration $button-md-transition-timing-function,
-              color $button-md-transition-duration $button-md-transition-timing-function;
+              box-shadow $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
+              background-color $fab-button-md-transition-duration $fab-button-md-transition-timing-function,
+              color $fab-button-md-transition-duration $fab-button-md-transition-timing-function;
 }
 
 .fab-md-in-list.activated {

src/components/fab/fab.module.ts

@@ -1,31 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { IconModule } from '../icon/icon.module';
-
-import { FabButton } from './fab';
-import { FabContainer } from './fab-container';
-import { FabList } from './fab-list';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    IconModule
-  ],
-  declarations: [
-    FabButton,
-    FabContainer,
-    FabList
-  ],
-  exports: [
-    FabButton,
-    FabContainer,
-    FabList
-  ]
-})
-export class FabModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: FabModule, providers: []
-    };
-  }
-}

src/components/grid/grid.module.ts

@@ -1,26 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Grid } from './grid';
-import { Row } from './row';
-import { Col } from './col';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Grid,
-    Row,
-    Col
-  ],
-  exports: [
-    Grid,
-    Row,
-    Col
-  ]
-})
-export class GridModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: GridModule, providers: []
-    };
-  }
-}

src/components/icon/icon.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Icon } from './icon';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Icon
-  ],
-  exports: [
-    Icon
-  ]
-})
-export class IconModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: IconModule, providers: []
-    };
-  }
-}

src/components/img/img-interface.ts

@@ -0,0 +1,9 @@
+
+export interface Img {
+  top: number;
+  bottom: number;
+  canRender: boolean;
+  canRequest: boolean;
+  reset(): void;
+  update(): void;
+};

src/components/img/img.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Img } from './img';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Img
-  ],
-  exports: [
-    Img
-  ]
-})
-export class ImgModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ImgModule, providers: []
-    };
-  }
-}

src/components/img/img.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
 
+import { Img as IImg } from './img-interface';
 import { Content } from '../content/content';
 import { DomController } from '../../platform/dom-controller';
 import { isPresent, isTrueProperty } from '../../util/util';
@@ -95,7 +96,7 @@ import { Platform } from '../../platform/platform';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class Img implements OnDestroy {
+export class Img implements OnDestroy, IImg {
   /** @internal */
   _src: string;
   /** @internal */

src/components/infinite-scroll/infinite-scroll.module.ts

@@ -1,30 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { InfiniteScroll } from './infinite-scroll';
-import { InfiniteScrollContent } from './infinite-scroll-content';
-
-import { SpinnerModule } from '../spinner/spinner.module';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule,
-    SpinnerModule
-  ],
-  declarations: [
-    InfiniteScroll,
-    InfiniteScrollContent
-  ],
-  exports: [
-    InfiniteScroll,
-    InfiniteScrollContent
-  ]
-})
-export class InfiniteScrollModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: InfiniteScrollModule, providers: []
-    };
-  }
-}

src/components/input/input.module.ts

@@ -1,33 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { NativeInput } from './native-input';
-import { NextInput } from './next-input';
-import { TextInput } from './input';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  declarations: [
-    NativeInput,
-    NextInput,
-    TextInput
-  ],
-  exports: [
-    NativeInput,
-    NextInput,
-    TextInput
-  ]
-})
-export class InputModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: InputModule, providers: []
-    };
-  }
-}

src/components/item/item-sliding-gesture.ts

@@ -2,7 +2,7 @@ import { ItemSliding } from './item-sliding';
 import { List } from '../list/list';
 import { DomController } from '../../platform/dom-controller';
 import { GestureController, GESTURE_PRIORITY_SLIDING_ITEM, GESTURE_ITEM_SWIPE } from '../../gestures/gesture-controller';
-import { PanGesture } from '../../gestures/drag-gesture';
+import { PanGesture } from '../../gestures/pan-gesture';
 import { Platform } from '../../platform/platform';
 import { pointerCoord } from '../../util/dom';
 

src/components/item/item.module.ts

@@ -1,50 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Item } from './item';
-import { ItemContent } from './item-content';
-import { ItemDivider } from './item-divider';
-import { ItemGroup } from './item-group';
-import { ItemOptions } from './item-options';
-import { ItemReorder } from './item-reorder';
-import { ItemSliding } from './item-sliding';
-import { Reorder } from './reorder';
-
-import { IconModule } from '../icon/icon.module';
-import { LabelModule } from '../label/label.module';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule,
-    IconModule,
-    LabelModule
-  ],
-  declarations: [
-    Item,
-    ItemContent,
-    ItemDivider,
-    ItemGroup,
-    ItemOptions,
-    ItemReorder,
-    ItemSliding,
-    Reorder
-  ],
-  exports: [
-    Item,
-    ItemContent,
-    ItemDivider,
-    ItemGroup,
-    ItemOptions,
-    ItemReorder,
-    ItemSliding,
-    Reorder
-  ]
-})
-export class ItemModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ItemModule, providers: []
-    };
-  }
-}

src/components/label/label.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Label } from './label';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Label
-  ],
-  exports: [
-    Label
-  ]
-})
-export class LabelModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: LabelModule, providers: []
-    };
-  }
-}

src/components/list/list.module.ts

@@ -1,23 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { List } from './list';
-import { ListHeader } from './list-header';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    List,
-    ListHeader
-  ],
-  exports: [
-    List,
-    ListHeader
-  ]
-})
-export class ListModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ListModule, providers: []
-    };
-  }
-}

src/components/loading/loading.module.ts

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BackdropModule } from '../backdrop/backdrop.module';
-import { SpinnerModule } from '../spinner/spinner.module';
-
-import { LoadingCmp } from './loading-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule,
-    CommonModule,
-    SpinnerModule
-  ],
-  declarations: [
-    LoadingCmp
-  ],
-  exports: [
-    LoadingCmp
-  ],
-  entryComponents: [
-    LoadingCmp
-  ]
-})
-export class LoadingModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: LoadingModule, providers: []
-    };
-  }
-}

src/components/menu/menu-close.ts

@@ -1,6 +1,6 @@
 import { Directive, HostListener, Input } from '@angular/core';
 
-import { MenuController } from './menu-controller';
+import { MenuController } from '../app/menu-controller';
 
 
 /**

src/components/menu/menu-toggle.ts

@@ -1,8 +1,8 @@
 import { Directive, Input, HostListener, Optional } from '@angular/core';
 
 import { Button } from '../button/button';
-import { MenuController } from './menu-controller';
-import { Navbar } from '../navbar/navbar';
+import { MenuController } from '../app/menu-controller';
+import { Navbar } from '../toolbar/navbar';
 import { ViewController } from '../../navigation/view-controller';
 
 /**

src/components/menu/menu-types.ts

@@ -1,6 +1,6 @@
 import { Animation } from '../../animations/animation';
-import { Menu } from './menu';
-import { MenuController } from './menu-controller';
+import { Menu, MenuType as IMenuType } from '../app/menu-interface';
+import { MenuController } from '../app/menu-controller';
 import { Platform } from '../../platform/platform';
 
 
@@ -11,7 +11,7 @@ import { Platform } from '../../platform/platform';
  * type will provide their own animations for open and close
  * and registers itself with Menu.
  */
-export class MenuType {
+export class MenuType implements IMenuType {
   ani: Animation;
   isOpening: boolean;
 

src/components/menu/menu.module.ts

@@ -1,31 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BackdropModule } from '../backdrop/backdrop.module';
-
-import { Menu } from './menu';
-import { MenuClose } from './menu-close';
-import { MenuToggle } from './menu-toggle';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule
-  ],
-  declarations: [
-    Menu,
-    MenuClose,
-    MenuToggle
-  ],
-  exports: [
-    Menu,
-    MenuClose,
-    MenuToggle
-  ]
-})
-export class MenuModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: MenuModule, providers: []
-    };
-  }
-}

src/components/menu/menu.ts

@@ -9,7 +9,8 @@ import { GestureController, GESTURE_GO_BACK_SWIPE, BlockerDelegate } from '../..
 import { isTrueProperty, assert } from '../../util/util';
 import { Keyboard } from '../../platform/keyboard';
 import { MenuContentGesture } from  './menu-gestures';
-import { MenuController } from './menu-controller';
+import { Menu as MenuInterface } from '../app/menu-interface';
+import { MenuController } from '../app/menu-controller';
 import { MenuType } from './menu-types';
 import { Nav } from '../nav/nav';
 import { Platform } from '../../platform/platform';
@@ -192,7 +193,7 @@ import { RootNode } from '../split-pane/split-pane';
   encapsulation: ViewEncapsulation.None,
   providers: [{provide: RootNode, useExisting: forwardRef(() => Menu) }]
 })
-export class Menu implements RootNode {
+export class Menu implements RootNode, MenuInterface {
 
   private _cntEle: HTMLElement;
   private _gesture: MenuContentGesture;

src/components/menu/test/menu.spec.ts

@@ -1,4 +1,4 @@
-import { MenuController } from '../menu-controller';
+import { MenuController } from '../../app/menu-controller';
 import { mockMenu } from '../../../util/mock-providers';
 
 

src/components/modal/modal.module.ts

@@ -1,28 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BackdropModule } from '../backdrop/backdrop.module';
-
-import { ModalCmp } from './modal-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule
-  ],
-  declarations: [
-    ModalCmp
-  ],
-  exports: [
-    ModalCmp
-  ],
-  entryComponents: [
-    ModalCmp
-  ]
-})
-export class ModalModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ModalModule, providers: []
-    };
-  }
-}

src/components/nav/nav.module.ts

@@ -1,35 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Nav } from './nav';
-import { NavPop, } from './nav-pop';
-import { NavPopAnchor } from './nav-pop-anchor';
-import { NavPush } from './nav-push';
-import { NavPushAnchor } from './nav-push-anchor';
-import { OverlayPortal } from './overlay-portal';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Nav,
-    NavPop,
-    NavPopAnchor,
-    NavPush,
-    NavPushAnchor,
-    OverlayPortal
-  ],
-  exports: [
-    Nav,
-    NavPop,
-    NavPopAnchor,
-    NavPush,
-    NavPushAnchor,
-    OverlayPortal
-  ]
-})
-export class NavModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: NavModule, providers: []
-    };
-  }
-}

src/components/nav/nav.ts

@@ -6,6 +6,7 @@ import { DeepLinker } from '../../navigation/deep-linker';
 import { DomController } from '../../platform/dom-controller';
 import { GestureController } from '../../gestures/gesture-controller';
 import { Keyboard } from '../../platform/keyboard';
+import { Nav as INav } from '../../navigation/nav-interfaces';
 import { NavController } from '../../navigation/nav-controller';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
 import { NavOptions } from '../../navigation/nav-util';
@@ -54,7 +55,7 @@ import { RootNode } from '../split-pane/split-pane';
   encapsulation: ViewEncapsulation.None,
   providers: [{provide: RootNode, useExisting: forwardRef(() => Nav) }]
 })
-export class Nav extends NavControllerBase implements AfterViewInit, RootNode {
+export class Nav extends NavControllerBase implements AfterViewInit, RootNode, INav {
 
   private _root: any;
   private _hasInit: boolean = false;
@@ -127,7 +128,7 @@ export class Nav extends NavControllerBase implements AfterViewInit, RootNode {
   }
 
   goToRoot(opts: NavOptions) {
-    this.setRoot(this._root, this.rootParams, opts, null);
+    return this.setRoot(this._root, this.rootParams, opts, null);
   }
 
   /**

src/components/navbar/navbar.module.ts

@@ -1,29 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Navbar } from './navbar';
-
-import { ButtonModule } from '../button/button.module';
-import { IconModule } from '../icon/icon.module';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    ButtonModule,
-    CommonModule,
-    IconModule
-  ],
-  declarations: [
-    Navbar
-  ],
-  exports: [
-    Navbar
-  ]
-})
-export class NavbarModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: NavbarModule, providers: []
-    };
-  }
-}

src/components/note/note.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Note } from './note';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Note
-  ],
-  exports: [
-    Note
-  ]
-})
-export class NoteModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: NoteModule, providers: []
-    };
-  }
-}

src/components/option/option.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Option } from './option';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Option
-  ],
-  exports: [
-    Option
-  ]
-})
-export class OptionModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: OptionModule, providers: []
-    };
-  }
-}

src/components/picker/picker.module.ts

@@ -1,35 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BackdropModule } from '../backdrop/backdrop.module';
-import { ButtonModule } from '../button/button.module';
-
-import { PickerCmp } from './picker-component';
-import { PickerColumnCmp } from './picker-column';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule,
-    ButtonModule,
-    CommonModule
-  ],
-  declarations: [
-    PickerCmp,
-    PickerColumnCmp
-  ],
-  exports: [
-    PickerCmp,
-    PickerColumnCmp
-  ],
-  entryComponents: [
-    PickerCmp
-  ]
-})
-export class PickerModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: PickerModule, providers: []
-    };
-  }
-}

src/components/popover/popover.module.ts

@@ -1,28 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BackdropModule } from '../backdrop/backdrop.module';
-
-import { PopoverCmp } from './popover-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule
-  ],
-  declarations: [
-    PopoverCmp
-  ],
-  exports: [
-    PopoverCmp
-  ],
-  entryComponents: [
-    PopoverCmp
-  ]
-})
-export class PopoverModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: PopoverModule, providers: []
-    };
-  }
-}

src/components/radio/radio-group.ts

@@ -1,16 +1,10 @@
-import { ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, forwardRef, Input, Output, Renderer } from '@angular/core';
+import { ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, Input, Output, Renderer } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ListHeader } from '../list/list-header';
 import { isCheckedProperty, isTrueProperty } from '../../util/util';
 import { RadioButton } from './radio-button';
 
-export const RADIO_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => RadioGroup),
-  multi: true
-};
-
 /**
  * @name RadioGroup
  * @description
@@ -67,7 +61,7 @@ export const RADIO_VALUE_ACCESSOR: any = {
   host: {
     'role': 'radiogroup'
   },
-  providers: [RADIO_VALUE_ACCESSOR]
+  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: RadioGroup, multi: true } ],
 })
 export class RadioGroup {
 

src/components/radio/radio.module.ts

@@ -1,23 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { RadioButton } from './radio-button';
-import { RadioGroup } from './radio-group';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    RadioButton,
-    RadioGroup
-  ],
-  exports: [
-    RadioButton,
-    RadioGroup
-  ]
-})
-export class RadioModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: RadioModule, providers: []
-    };
-  }
-}

src/components/range/range.module.ts

@@ -1,27 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Range } from './range';
-import { RangeKnob } from './range-knob';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    Range,
-    RangeKnob
-  ],
-  exports: [
-    Range,
-    RangeKnob
-  ]
-})
-export class RangeModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: RangeModule, providers: []
-    };
-  }
-}

src/components/range/range.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { clamp, isTrueProperty } from '../../util/util';
@@ -13,13 +13,6 @@ import { PointerCoordinates, pointerCoord } from '../../util/dom';
 import { UIEventManager } from '../../gestures/ui-event-manager';
 
 
-export const RANGE_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => Range),
-  multi: true
-};
-
-
 /**
  * @name Range
  * @description
@@ -108,7 +101,7 @@ export const RANGE_VALUE_ACCESSOR: any = {
     '[class.range-pressed]': '_pressed',
     '[class.range-has-pin]': '_pin'
   },
-  providers: [RANGE_VALUE_ACCESSOR],
+  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Range, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
 export class Range extends BaseInput<any> implements AfterViewInit, ControlValueAccessor, OnDestroy {

src/components/refresher/refresher.module.ts

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { IconModule } from '../icon/icon.module';
-import { SpinnerModule } from '../spinner/spinner.module';
-
-import { Refresher } from './refresher';
-import { RefresherContent } from './refresher-content';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule,
-    IconModule,
-    SpinnerModule
-  ],
-  declarations: [
-    Refresher,
-    RefresherContent
-  ],
-  exports: [
-    Refresher,
-    RefresherContent
-  ]
-})
-export class RefresherModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: RefresherModule, providers: []
-    };
-  }
-}

src/components/scroll/scroll.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Scroll } from './scroll';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Scroll
-  ],
-  exports: [
-    Scroll
-  ]
-})
-export class ScrollModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ScrollModule, providers: []
-    };
-  }
-}

src/components/searchbar/searchbar.module.ts

@@ -1,27 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ButtonModule } from '../button/button.module';
-import { IconModule } from '../icon/icon.module';
-
-import { Searchbar } from './searchbar';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    ButtonModule,
-    IconModule
-  ],
-  declarations: [
-    Searchbar
-  ],
-  exports: [
-    Searchbar
-  ]
-})
-export class SearchbarModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: SearchbarModule, providers: []
-    };
-  }
-}

src/components/segment/segment.module.ts

@@ -1,23 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Segment } from './segment';
-import { SegmentButton } from './segment-button';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Segment,
-    SegmentButton
-  ],
-  exports: [
-    Segment,
-    SegmentButton
-  ]
-})
-export class SegmentModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: SegmentModule, providers: []
-    };
-  }
-}

src/components/select/select.module.ts

@@ -1,43 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { Select } from './select';
-import { SelectPopover } from './select-popover-component';
-
-import { ItemModule } from '../item/item.module';
-import { LabelModule } from '../label/label.module';
-import { ListModule } from '../list/list.module';
-import { RadioModule } from '../radio/radio.module';
-
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ItemModule,
-    LabelModule,
-    ListModule,
-    RadioModule
-  ],
-  declarations: [
-    Select,
-    SelectPopover
-  ],
-  exports: [
-    Select,
-    SelectPopover
-  ],
-  entryComponents: [
-    SelectPopover
-  ]
-})
-export class SelectModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: SelectModule, providers: []
-    };
-  }
-}

src/components/select/select.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ActionSheet } from '../action-sheet/action-sheet';
@@ -15,12 +15,6 @@ import { NavController } from '../../navigation/nav-controller';
 import { Option } from '../option/option';
 import { SelectPopover, SelectPopoverOption } from './select-popover-component';
 
-export const SELECT_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => Select),
-  multi: true
-};
-
 /**
  * @name Select
  * @description
@@ -150,7 +144,7 @@ export const SELECT_VALUE_ACCESSOR: any = {
   host: {
     '[class.select-disabled]': '_disabled'
   },
-  providers: [SELECT_VALUE_ACCESSOR],
+  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Select, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
 export class Select extends BaseInput<string[]> implements AfterViewInit, OnDestroy {

src/components/show-hide-when/show-hide-when.module.ts

@@ -1,23 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ShowWhen } from './show-when';
-import { HideWhen } from './hide-when';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    ShowWhen,
-    HideWhen
-  ],
-  exports: [
-    ShowWhen,
-    HideWhen
-  ]
-})
-export class ShowHideWhenModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ShowHideWhenModule, providers: []
-    };
-  }
-}

src/components/slides/slides.module.ts

@@ -1,23 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Slide } from './slide';
-import { Slides } from './slides';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Slide,
-    Slides
-  ],
-  exports: [
-    Slide,
-    Slides
-  ]
-})
-export class SlidesModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: SlidesModule, providers: []
-    };
-  }
-}

src/components/spinner/spinner.module.ts

@@ -1,24 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Spinner } from './spinner';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    Spinner
-  ],
-  exports: [
-    Spinner
-  ]
-})
-export class SpinnerModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: SpinnerModule, providers: []
-    };
-  }
-}

src/components/split-pane/split-pane.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { SplitPane } from './split-pane';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    SplitPane
-  ],
-  exports: [
-    SplitPane
-  ]
-})
-export class SplitPaneModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: SplitPaneModule, providers: []
-    };
-  }
-}

src/components/tabs/tab.ts

@@ -7,6 +7,7 @@ import { DomController } from '../../platform/dom-controller';
 import { GestureController } from '../../gestures/gesture-controller';
 import { isTrueProperty } from '../../util/util';
 import { Keyboard } from '../../platform/keyboard';
+import { Tab as ITab } from '../../navigation/nav-interfaces';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
 import { NavOptions } from '../../navigation/nav-util';
 import { Platform } from '../../platform/platform';
@@ -132,7 +133,7 @@ import { ViewController } from '../../navigation/view-controller';
   },
   encapsulation: ViewEncapsulation.None,
 })
-export class Tab extends NavControllerBase {
+export class Tab extends NavControllerBase implements ITab {
   /**
    * @hidden
    */

src/components/tabs/tabs.module.ts

@@ -1,38 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BadgeModule } from '../badge/badge.module';
-import { IconModule } from '../icon/icon.module';
-
-import { Tab } from './tab';
-import { TabButton } from './tab-button';
-import { TabHighlight } from './tab-highlight';
-import { Tabs } from './tabs';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BadgeModule,
-    CommonModule,
-    IconModule
-  ],
-  declarations: [
-    Tab,
-    TabButton,
-    TabHighlight,
-    Tabs
-  ],
-  exports: [
-    Tab,
-    TabButton,
-    TabHighlight,
-    Tabs
-  ]
-})
-export class TabsModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: TabsModule, providers: []
-    };
-  }
-}

src/components/tabs/tabs.ts

@@ -5,6 +5,7 @@ import { Config } from '../../config/config';
 import { DeepLinker } from '../../navigation/deep-linker';
 import { Ion } from '../ion';
 import { isBlank, assert } from '../../util/util';
+import { Tabs as ITabs } from '../../navigation/nav-interfaces';
 import { NavController } from '../../navigation/nav-controller';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
 import { getComponent, NavOptions, DIRECTION_SWITCH } from '../../navigation/nav-util';
@@ -159,7 +160,7 @@ import { ViewController } from '../../navigation/view-controller';
   encapsulation: ViewEncapsulation.None,
   providers: [{provide: RootNode, useExisting: forwardRef(() => Tabs) }]
 })
-export class Tabs extends Ion implements AfterViewInit, RootNode {
+export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs {
   /** @internal */
   _ids: number = -1;
   /** @internal */

src/components/thumbnail/thumbnail.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Thumbnail } from './thumbnail';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Thumbnail
-  ],
-  exports: [
-    Thumbnail
-  ]
-})
-export class ThumbnailModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ThumbnailModule, providers: []
-    };
-  }
-}

src/components/toast/toast.module.ts

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BackdropModule } from '../backdrop/backdrop.module';
-import { ButtonModule } from '../button/button.module';
-
-import { ToastCmp } from './toast-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule,
-    ButtonModule,
-    CommonModule
-  ],
-  declarations: [
-    ToastCmp
-  ],
-  exports: [
-    ToastCmp
-  ],
-  entryComponents: [
-    ToastCmp
-  ]
-})
-export class ToastModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ToastModule, providers: []
-    };
-  }
-}

src/components/toggle/toggle-gesture.ts

@@ -1,6 +1,6 @@
 import { GestureController, GESTURE_PRIORITY_TOGGLE, GESTURE_TOGGLE } from '../../gestures/gesture-controller';
 import { DomController } from '../../platform/dom-controller';
-import { PanGesture } from '../../gestures/drag-gesture';
+import { PanGesture } from '../../gestures/pan-gesture';
 import { Platform } from '../../platform/platform';
 import { pointerCoord } from '../../util/dom';
 import { Toggle } from './toggle';

src/components/toggle/toggle.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Toggle } from './toggle';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Toggle
-  ],
-  exports: [
-    Toggle
-  ]
-})
-export class ToggleModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ToggleModule, providers: []
-    };
-  }
-}

src/components/toggle/toggle.ts

@@ -1,4 +1,4 @@
-import { NgZone, AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
+import { NgZone, AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Config } from '../../config/config';
@@ -13,12 +13,6 @@ import { KEY_ENTER, KEY_SPACE } from '../../platform/key';
 import { Platform } from '../../platform/platform';
 import { ToggleGesture } from './toggle-gesture';
 
-export const TOGGLE_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => Toggle),
-  multi: true
-};
-
 /**
  * @name Toggle
  * @description
@@ -76,7 +70,7 @@ export const TOGGLE_VALUE_ACCESSOR: any = {
     '[class.toggle-checked]': '_value',
     '[class.toggle-activated]': '_activated',
   },
-  providers: [TOGGLE_VALUE_ACCESSOR],
+  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Toggle, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
 export class Toggle extends BaseInput<boolean> implements IonicTapInput, AfterViewInit, OnDestroy  {

src/components/toolbar/navbar.ts

@@ -4,7 +4,7 @@ import { App } from '../app/app';
 import { Config } from '../../config/config';
 import { isTrueProperty } from '../../util/util';
 import { NavController } from '../../navigation/nav-controller';
-import { ToolbarBase } from '../toolbar/toolbar-base';
+import { ToolbarBase } from './toolbar-base';
 import { ViewController } from '../../navigation/view-controller';
 
 

src/components/toolbar/toolbar-footer.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, Optional, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
+import { Footer as IFooter } from '../../navigation/nav-interfaces';
 import { ViewController } from '../../navigation/view-controller';
 
 /**
@@ -26,7 +27,7 @@ import { ViewController } from '../../navigation/view-controller';
 @Directive({
   selector: 'ion-footer'
 })
-export class Footer extends Ion {
+export class Footer extends Ion implements IFooter {
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
     super(config, elementRef, renderer, 'footer');

src/components/toolbar/toolbar-header.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, Optional, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
+import { Header as IHeader } from '../../navigation/nav-interfaces';
 import { ViewController } from '../../navigation/view-controller';
 
 /**
@@ -30,7 +31,7 @@ import { ViewController } from '../../navigation/view-controller';
 @Directive({
   selector: 'ion-header'
 })
-export class Header extends Ion {
+export class Header extends Ion implements IHeader {
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
     super(config, elementRef, renderer, 'header');

src/components/toolbar/toolbar-item.ts

@@ -3,7 +3,7 @@ import { ContentChildren, Directive, ElementRef, forwardRef, Optional, Inject, R
 import { Button } from '../button/button';
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
-import { Navbar } from '../navbar/navbar';
+import { Navbar } from './navbar';
 import { Toolbar } from './toolbar';
 
 

src/components/toolbar/toolbar-title.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Optional, I
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
-import { Navbar } from '../navbar/navbar';
+import { Navbar } from './navbar';
 import { Toolbar } from './toolbar';
 
 

src/components/toolbar/toolbar.module.ts

@@ -1,36 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Footer } from './toolbar-footer';
-import { Header } from './toolbar-header';
-import { Toolbar } from './toolbar';
-import { ToolbarItem } from './toolbar-item';
-import { ToolbarTitle } from './toolbar-title';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    Footer,
-    Header,
-    Toolbar,
-    ToolbarItem,
-    ToolbarTitle
-  ],
-  exports: [
-    Footer,
-    Header,
-    Toolbar,
-    ToolbarItem,
-    ToolbarTitle
-  ]
-})
-export class ToolbarModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ToolbarModule, providers: []
-    };
-  }
-}

src/components/typography/typography.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Typography } from './typography';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Typography
-  ],
-  exports: [
-    Typography
-  ]
-})
-export class TypographyModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: TypographyModule, providers: []
-    };
-  }
-}

src/components/virtual-scroll/virtual-scroll.module.ts

@@ -1,29 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { VirtualFooter } from './virtual-footer';
-import { VirtualHeader } from './virtual-header';
-import { VirtualItem } from './virtual-item';
-import { VirtualScroll } from './virtual-scroll';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    VirtualFooter,
-    VirtualHeader,
-    VirtualItem,
-    VirtualScroll
-  ],
-  exports: [
-    VirtualFooter,
-    VirtualHeader,
-    VirtualItem,
-    VirtualScroll
-  ]
-})
-export class VirtualScrollModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: VirtualScrollModule, providers: []
-    };
-  }
-}

src/gestures/slide-gesture.ts

@@ -1,4 +1,4 @@
-import { PanGesture } from './drag-gesture';
+import { PanGesture } from './pan-gesture';
 import { clamp, assert } from '../util/util';
 import { Platform } from '../platform/platform';
 import { pointerCoord } from '../util/dom';

src/index.ts

@@ -5,7 +5,7 @@
  */
 import { ANALYZE_FOR_ENTRY_COMPONENTS, APP_INITIALIZER, ComponentFactoryResolver, Inject, Injector, ModuleWithProviders, NgModule, NgZone, Optional } from '@angular/core';
 import { APP_BASE_HREF, Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy, PlatformLocation } from '@angular/common';
-import { DOCUMENT } from '@angular/platform-browser';
+import { DOCUMENT, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
@@ -15,10 +15,9 @@ import { CommonModule } from '@angular/common';
 import { DeepLinkConfig } from './navigation/nav-util';
 
 /**
- * Import Providers
+ * Global Providers
  */
-import { ActionSheetController } from './components/action-sheet/action-sheet-controller';
-import { AlertController } from './components/alert/alert-controller';
+
 import { App } from './components/app/app';
 import { AppRootToken } from './components/app/app-root';
 import { Config, setupConfig, ConfigToken } from './config/config';
@@ -27,140 +26,137 @@ import { DomController } from './platform/dom-controller';
 import { Events, setupProvideEvents } from './util/events';
 import { Form } from './util/form';
 import { GestureController } from './gestures/gesture-controller';
+import { IonicGestureConfig } from './gestures/gesture-config';
 import { Haptic } from './tap-click/haptic';
 import { Keyboard } from './platform/keyboard';
-import { LoadingController } from './components/loading/loading-controller';
-import { MenuController } from './components/menu/menu-controller';
-import { ModalController } from './components/modal/modal-controller';
 import { ModuleLoader, provideModuleLoader, setupPreloading, LAZY_LOADED_TOKEN } from './util/module-loader';
 import { NgModuleLoader } from './util/ng-module-loader';
-import { PickerController } from './components/picker/picker-controller';
 import { Platform, setupPlatform } from './platform/platform';
 import { PlatformConfigToken, providePlatformConfigs } from './platform/platform-registry';
-import { PopoverController } from './components/popover/popover-controller';
 import { TapClick, setupTapClick } from './tap-click/tap-click';
-import { ToastController } from './components/toast/toast-controller';
 import { registerModeConfigs } from './config/mode-registry';
 import { TransitionController } from './transitions/transition-controller';
 import { UrlSerializer, setupUrlSerializer, DeepLinkConfigToken } from './navigation/url-serializer';
 
-
 /**
- * Import Modules
+ * Import Components/Directives/Etc
  */
-import { ActionSheetModule } from './components/action-sheet/action-sheet.module';
-import { AlertModule } from './components/alert/alert.module';
-import { AppModule } from './components/app/app.module';
-import { AvatarModule } from './components/avatar/avatar.module';
-import { BackdropModule } from './components/backdrop/backdrop.module';
-import { BadgeModule } from './components/badge/badge.module';
-import { ButtonModule } from './components/button/button.module';
-import { CardModule } from './components/card/card.module';
-import { CheckboxModule } from './components/checkbox/checkbox.module';
-import { ChipModule } from './components/chip/chip.module';
-import { ClickBlockModule } from './components/click-block/click-block.module';
-import { ContentModule } from './components/content/content.module';
-import { DateTimeModule } from './components/datetime/datetime.module';
-import { FabModule } from './components/fab/fab.module';
-import { GridModule } from './components/grid/grid.module';
-import { IconModule } from './components/icon/icon.module';
-import { ImgModule } from './components/img/img.module';
-import { InfiniteScrollModule } from './components/infinite-scroll/infinite-scroll.module';
-import { InputModule } from './components/input/input.module';
-import { ItemModule } from './components/item/item.module';
-import { LabelModule } from './components/label/label.module';
-import { ListModule } from './components/list/list.module';
-import { LoadingModule } from './components/loading/loading.module';
-import { MenuModule } from './components/menu/menu.module';
-import { ModalModule } from './components/modal/modal.module';
-import { NavModule } from './components/nav/nav.module';
-import { NavbarModule } from './components/navbar/navbar.module';
-import { NoteModule } from './components/note/note.module';
-import { OptionModule } from './components/option/option.module';
-import { PickerModule } from './components/picker/picker.module';
-import { PopoverModule } from './components/popover/popover.module';
-import { RadioModule } from './components/radio/radio.module';
-import { RangeModule } from './components/range/range.module';
-import { RefresherModule } from './components/refresher/refresher.module';
-import { ScrollModule } from './components/scroll/scroll.module';
-import { SearchbarModule } from './components/searchbar/searchbar.module';
-import { SegmentModule } from './components/segment/segment.module';
-import { SelectModule } from './components/select/select.module';
-import { ShowHideWhenModule } from './components/show-hide-when/show-hide-when.module';
-import { SlidesModule } from './components/slides/slides.module';
-import { SpinnerModule } from './components/spinner/spinner.module';
-import { SplitPaneModule } from './components/split-pane/split-pane.module';
-import { TabsModule } from './components/tabs/tabs.module';
-import { ThumbnailModule } from './components/thumbnail/thumbnail.module';
-import { ToastModule } from './components/toast/toast.module';
-import { ToggleModule } from './components/toggle/toggle.module';
-import { ToolbarModule } from './components/toolbar/toolbar.module';
-import { TypographyModule } from './components/typography/typography.module';
-import { VirtualScrollModule } from './components/virtual-scroll/virtual-scroll.module';
+
+import { ActionSheetCmp } from './components/action-sheet/action-sheet-component';
+import { ActionSheetController } from './components/action-sheet/action-sheet-controller';
+import { AlertCmp } from './components/alert/alert-component';
+import { AlertController } from './components/alert/alert-controller';
+import { ClickBlock } from './components/app/click-block';
+import { IonicApp } from './components/app/app-root';
+import { OverlayPortal } from './components/app/overlay-portal';
+import { Avatar } from './components/avatar/avatar';
+import { Backdrop } from './components/backdrop/backdrop';
+import { Badge } from './components/badge/badge';
+import { Button } from './components/button/button';
+import { Card } from './components/card/card';
+import { CardContent } from './components/card/card-content';
+import { CardHeader } from './components/card/card-header';
+import { CardTitle } from './components/card/card-title';
+import { Checkbox } from './components/checkbox/checkbox';
+import { Chip } from './components/chip/chip';
+import { Content } from './components/content/content';
+import { DateTime } from './components/datetime/datetime';
+import { FabButton } from './components/fab/fab';
+import { FabContainer } from './components/fab/fab-container';
+import { FabList } from './components/fab/fab-list';
+import { Col } from './components/grid/col';
+import { Grid } from './components/grid/grid';
+import { Row } from './components/grid/row';
+import { Icon } from './components/icon/icon';
+import { Img } from './components/img/img';
+import { InfiniteScroll } from './components/infinite-scroll/infinite-scroll';
+import { InfiniteScrollContent } from './components/infinite-scroll/infinite-scroll-content';
+import { NativeInput } from './components/input/native-input';
+import { NextInput } from './components/input/next-input';
+import { TextInput } from './components/input/input';
+import { Item } from './components/item/item';
+import { ItemContent } from './components/item/item-content';
+import { ItemDivider } from './components/item/item-divider';
+import { ItemGroup } from './components/item/item-group';
+import { ItemOptions } from './components/item/item-options';
+import { ItemReorder } from './components/item/item-reorder';
+import { ItemSliding } from './components/item/item-sliding';
+import { Reorder } from './components/item/reorder';
+import { Label } from './components/label/label';
+import { List } from './components/list/list';
+import { ListHeader } from './components/list/list-header';
+import { LoadingCmp } from './components/loading/loading-component';
+import { LoadingController } from './components/loading/loading-controller';
+import { Menu } from './components/menu/menu';
+import { MenuClose } from './components/menu/menu-close';
+import { MenuController } from './components/app/menu-controller';
+import { MenuToggle } from './components/menu/menu-toggle';
+import { ModalCmp } from './components/modal/modal-component';
+import { ModalController } from './components/modal/modal-controller';
+import { Nav } from './components/nav/nav';
+import { NavPop } from './components/nav/nav-pop';
+import { NavPopAnchor } from './components/nav/nav-pop-anchor';
+import { NavPush } from './components/nav/nav-push';
+import { NavPushAnchor } from './components/nav/nav-push-anchor';
+import { Note } from './components/note/note';
+import { Option } from './components/option/option';
+import { PickerCmp } from './components/picker/picker-component';
+import { PickerColumnCmp } from './components/picker/picker-column';
+import { PickerController } from './components/picker/picker-controller';
+import { PopoverCmp } from './components/popover/popover-component';
+import { PopoverController } from './components/popover/popover-controller';
+import { RadioButton } from './components/radio/radio-button';
+import { RadioGroup } from './components/radio/radio-group';
+import { Range } from './components/range/range';
+import { RangeKnob } from './components/range/range-knob';
+import { Refresher } from './components/refresher/refresher';
+import { RefresherContent } from './components/refresher/refresher-content';
+import { Scroll } from './components/scroll/scroll';
+import { Searchbar } from './components/searchbar/searchbar';
+import { Segment } from './components/segment/segment';
+import { Select } from './components/select/select';
+import { SegmentButton } from './components/segment/segment-button';
+import { ShowWhen } from './components/show-hide-when/show-when';
+import { HideWhen } from './components/show-hide-when/hide-when';
+import { Slide } from './components/slides/slide';
+import { Slides } from './components/slides/slides';
+import { Spinner } from './components/spinner/spinner';
+import { SplitPane } from './components/split-pane/split-pane';
+import { Tab } from './components/tabs/tab';
+import { TabButton } from './components/tabs/tab-button';
+import { TabHighlight } from './components/tabs/tab-highlight';
+import { Tabs } from './components/tabs/tabs';
+import { Thumbnail } from './components/thumbnail/thumbnail';
+import { ToastCmp } from './components/toast/toast-component';
+import { ToastController } from './components/toast/toast-controller';
+import { Toggle } from './components/toggle/toggle';
+import { Footer } from './components/toolbar/toolbar-footer';
+import { Header } from './components/toolbar/toolbar-header';
+import { Toolbar } from './components/toolbar/toolbar';
+import { ToolbarItem } from './components/toolbar/toolbar-item';
+import { ToolbarTitle } from './components/toolbar/toolbar-title';
+import { Navbar } from './components/toolbar/navbar';
+import { Typography } from './components/typography/typography';
+import { VirtualFooter } from './components/virtual-scroll/virtual-footer';
+import { VirtualHeader } from './components/virtual-scroll/virtual-header';
+import { VirtualItem } from './components/virtual-scroll/virtual-item';
+import { VirtualScroll } from './components/virtual-scroll/virtual-scroll';
 
 
-/**
- * Export Modules
- */
-export { ActionSheetModule } from './components/action-sheet/action-sheet.module';
-export { AlertModule } from './components/alert/alert.module';
-export { AppModule } from './components/app/app.module';
-export { AvatarModule } from './components/avatar/avatar.module';
-export { BackdropModule } from './components/backdrop/backdrop.module';
-export { BadgeModule } from './components/badge/badge.module';
-export { ButtonModule } from './components/button/button.module';
-export { CardModule } from './components/card/card.module';
-export { CheckboxModule } from './components/checkbox/checkbox.module';
-export { ChipModule } from './components/chip/chip.module';
-export { ClickBlockModule } from './components/click-block/click-block.module';
-export { ContentModule } from './components/content/content.module';
-export { DateTimeModule } from './components/datetime/datetime.module';
-export { FabModule } from './components/fab/fab.module';
-export { GridModule } from './components/grid/grid.module';
-export { IconModule } from './components/icon/icon.module';
-export { ImgModule } from './components/img/img.module';
-export { InfiniteScrollModule } from './components/infinite-scroll/infinite-scroll.module';
-export { InputModule } from './components/input/input.module';
-export { ItemModule } from './components/item/item.module';
-export { LabelModule } from './components/label/label.module';
-export { ListModule } from './components/list/list.module';
-export { LoadingModule } from './components/loading/loading.module';
-export { MenuModule } from './components/menu/menu.module';
-export { ModalModule } from './components/modal/modal.module';
-export { NavModule } from './components/nav/nav.module';
-export { NavbarModule } from './components/navbar/navbar.module';
-export { NoteModule } from './components/note/note.module';
-export { OptionModule } from './components/option/option.module';
-export { PickerModule } from './components/picker/picker.module';
-export { PopoverModule } from './components/popover/popover.module';
-export { RadioModule } from './components/radio/radio.module';
-export { RangeModule } from './components/range/range.module';
-export { RefresherModule } from './components/refresher/refresher.module';
-export { ScrollModule } from './components/scroll/scroll.module';
-export { SearchbarModule } from './components/searchbar/searchbar.module';
-export { SegmentModule } from './components/segment/segment.module';
-export { SelectModule } from './components/select/select.module';
-export { ShowHideWhenModule } from './components/show-hide-when/show-hide-when.module';
-export { SlidesModule } from './components/slides/slides.module';
-export { SpinnerModule } from './components/spinner/spinner.module';
-export { SplitPaneModule } from './components/split-pane/split-pane.module';
-export { TabsModule } from './components/tabs/tabs.module';
-export { ThumbnailModule } from './components/thumbnail/thumbnail.module';
-export { ToastModule } from './components/toast/toast.module';
-export { ToggleModule } from './components/toggle/toggle.module';
-export { ToolbarModule } from './components/toolbar/toolbar.module';
-export { TypographyModule } from './components/typography/typography.module';
-export { VirtualScrollModule } from './components/virtual-scroll/virtual-scroll.module';
 
 /**
  * Export Components/Directives
  */
+export { IonicApp } from './components/app/app-root';
+export { MenuController } from './components/app/menu-controller';
 export { ActionSheet } from './components/action-sheet/action-sheet';
 export { ActionSheetController } from './components/action-sheet/action-sheet-controller';
 export { ActionSheetOptions } from './components/action-sheet/action-sheet-options';
-export { AlertController } from './components/alert/alert-controller';
+export { ActionSheetCmp } from './components/action-sheet/action-sheet-component';
 export { Alert } from './components/alert/alert';
-export { AlertOptions, AlertInputOptions } from './components/alert/alert-options';
+export { AlertController } from './components/alert/alert-controller';
+export { AlertOptions } from './components/alert/alert-options';
+export { AlertCmp } from './components/alert/alert-component';
 export { App } from './components/app/app';
 export { Avatar } from './components/avatar/avatar';
 export { Backdrop } from './components/backdrop/backdrop';
@@ -172,7 +168,6 @@ export { CardHeader } from './components/card/card-header';
 export { CardTitle } from './components/card/card-title';
 export { Checkbox } from './components/checkbox/checkbox';
 export { Chip } from './components/chip/chip';
-export { ClickBlock } from './components/click-block/click-block';
 export { Content, ScrollEvent } from './components/content/content';
 export { DateTime } from './components/datetime/datetime';
 export { FabButton } from './components/fab/fab';
@@ -187,29 +182,27 @@ export { Img } from './components/img/img';
 export { InfiniteScroll } from './components/infinite-scroll/infinite-scroll';
 export { InfiniteScrollContent } from './components/infinite-scroll/infinite-scroll-content';
 export { TextInput } from './components/input/input';
-export { IonicApp } from './components/app/app-root';
-
 export { Item } from './components/item/item';
 export { ItemContent } from './components/item/item-content';
 export { ItemDivider } from './components/item/item-divider';
 export { ItemGroup } from './components/item/item-group';
-export { ItemReorder } from './components/item/item-reorder';
-export { Reorder } from './components/item/reorder';
-export { ItemSliding } from './components/item/item-sliding';
 export { ItemOptions } from './components/item/item-options';
-
+export { ItemReorder } from './components/item/item-reorder';
+export { ItemSliding } from './components/item/item-sliding';
+export { Reorder } from './components/item/reorder';
 export { Label } from './components/label/label';
 export { List } from './components/list/list';
 export { ListHeader } from './components/list/list-header';
 export { Loading } from './components/loading/loading';
 export { LoadingController } from './components/loading/loading-controller';
 export { LoadingOptions } from './components/loading/loading-options';
+export { LoadingCmp } from './components/loading/loading-component';
 export { Menu } from './components/menu/menu';
 export { MenuClose } from './components/menu/menu-close';
-export { MenuController } from './components/menu/menu-controller';
 export { MenuToggle } from './components/menu/menu-toggle';
 export { MenuType } from './components/menu/menu-types';
 export { Modal } from './components/modal/modal';
+export { ModalCmp } from './components/modal/modal-component';
 export { ModalController } from './components/modal/modal-controller';
 export { ModalOptions } from './components/modal/modal-options';
 export { Nav } from './components/nav/nav';
@@ -217,16 +210,17 @@ export { NavPop } from './components/nav/nav-pop';
 export { NavPopAnchor } from './components/nav/nav-pop-anchor';
 export { NavPush } from './components/nav/nav-push';
 export { NavPushAnchor } from './components/nav/nav-push-anchor';
-export { Navbar } from './components/navbar/navbar';
 export { NativeInput } from './components/input/native-input';
 export { NextInput } from './components/input/next-input';
 export { Note } from './components/note/note';
 export { Option } from './components/option/option';
-export { OverlayPortal } from './components/nav/overlay-portal';
 export { Picker } from './components/picker/picker';
+export { PickerCmp } from './components/picker/picker-component';
+export { PickerColumnCmp } from './components/picker/picker-column';
 export { PickerController }  from './components/picker/picker-controller';
 export { PickerOptions, PickerColumn, PickerColumnOption } from './components/picker/picker-options';
 export { Popover } from './components/popover/popover';
+export { PopoverCmp } from './components/popover/popover-component';
 export { PopoverController } from './components/popover/popover-controller';
 export { PopoverOptions } from './components/popover/popover-options';
 export { RadioButton } from './components/radio/radio-button';
@@ -252,24 +246,27 @@ export { Tab } from './components/tabs/tab';
 export { TabButton } from './components/tabs/tab-button';
 export { TabHighlight } from './components/tabs/tab-highlight';
 export { Tabs } from './components/tabs/tabs';
-export { TapClick, setupTapClick, isActivatable } from './tap-click/tap-click';
 export { Toast } from './components/toast/toast';
+export { ToastCmp } from './components/toast/toast-component';
 export { ToastController } from './components/toast/toast-controller';
 export { ToastOptions } from './components/toast/toast-options';
 export { Toggle } from './components/toggle/toggle';
-export { ToolbarBase } from './components/toolbar/toolbar-base';
-export { Toolbar } from './components/toolbar/toolbar';
-export { Header } from './components/toolbar/toolbar-header';
 export { Footer } from './components/toolbar/toolbar-footer';
+export { Header } from './components/toolbar/toolbar-header';
+export { Toolbar } from './components/toolbar/toolbar';
 export { ToolbarItem } from './components/toolbar/toolbar-item';
-export { ToolbarTitle } from'./components/toolbar/toolbar-title';
+export { ToolbarTitle } from './components/toolbar/toolbar-title';
+export { Navbar } from './components/toolbar/navbar';
 export { Thumbnail } from './components/thumbnail/thumbnail';
 export { Typography } from './components/typography/typography';
+export { VirtualFooter } from './components/virtual-scroll/virtual-footer';
+export { VirtualHeader } from './components/virtual-scroll/virtual-header';
+export { VirtualItem } from './components/virtual-scroll/virtual-item';
 export { VirtualScroll } from './components/virtual-scroll/virtual-scroll';
 
 
 /**
- * Export Providers
+ * Global Providers
  */
 export { Config, setupConfig, ConfigToken } from './config/config';
 export { DomController, DomCallback } from './platform/dom-controller';
@@ -281,22 +278,15 @@ export { NavController } from './navigation/nav-controller';
 export { NavControllerBase } from './navigation/nav-controller-base';
 export { NavParams } from './navigation/nav-params';
 export { NavLink, NavOptions, DeepLinkConfig, DeepLinkMetadata, DeepLinkMetadataFactory } from './navigation/nav-util';
+export { TapClick, setupTapClick, isActivatable } from './tap-click/tap-click';
 export { UrlSerializer, DeepLinkConfigToken } from './navigation/url-serializer';
 export { ViewController } from './navigation/view-controller';
-export { ActionSheetCmp } from './components/action-sheet/action-sheet-component';
-export { AlertCmp } from './components/alert/alert-component';
-export { LoadingCmp } from './components/loading/loading-component';
-export { ModalCmp } from './components/modal/modal-component';
-export { PickerCmp } from './components/picker/picker-component';
-export { PickerColumnCmp } from './components/picker/picker-column';
-export { PopoverCmp } from './components/popover/popover-component';
-export { ToastCmp } from './components/toast/toast-component';
 
 
 /**
  * Export Utils
  */
-export { PanGesture, PanGestureConfig } from './gestures/drag-gesture';
+export { PanGesture, PanGestureConfig } from './gestures/pan-gesture';
 export { Gesture } from './gestures/gesture';
 export { SlideEdgeGesture } from './gestures/slide-edge-gesture';
 export { SlideData, SlideGesture } from './gestures/slide-gesture';
@@ -368,115 +358,210 @@ export { IonicGestureConfig } from './gestures/gesture-config';
  * ```
  */
 @NgModule({
+  declarations: [
+    ActionSheetCmp,
+    AlertCmp,
+    ClickBlock,
+    IonicApp,
+    OverlayPortal,
+    Avatar,
+    Backdrop,
+    Badge,
+    Button,
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    Checkbox,
+    Chip,
+    Col,
+    Content,
+    DateTime,
+    FabButton,
+    FabContainer,
+    FabList,
+    Grid,
+    Img,
+    Icon,
+    InfiniteScroll,
+    InfiniteScrollContent,
+    Item,
+    ItemContent,
+    ItemDivider,
+    ItemGroup,
+    ItemOptions,
+    ItemReorder,
+    ItemSliding,
+    Label,
+    List,
+    ListHeader,
+    Reorder,
+    LoadingCmp,
+    NativeInput,
+    NextInput,
+    Menu,
+    MenuClose,
+    MenuToggle,
+    ModalCmp,
+    Nav,
+    NavPop,
+    NavPopAnchor,
+    NavPush,
+    NavPushAnchor,
+    Note,
+    Option,
+    PickerCmp,
+    PickerColumnCmp,
+    PopoverCmp,
+    RadioButton,
+    RadioGroup,
+    Range,
+    RangeKnob,
+    Refresher,
+    RefresherContent,
+    Row,
+    Scroll,
+    Searchbar,
+    Segment,
+    SegmentButton,
+    Select,
+    ShowWhen,
+    HideWhen,
+    Slide,
+    Slides,
+    Spinner,
+    SplitPane,
+    Tab,
+    TabButton,
+    TabHighlight,
+    Tabs,
+    TextInput,
+    Thumbnail,
+    ToastCmp,
+    Toggle,
+    Footer,
+    Header,
+    Toolbar,
+    ToolbarItem,
+    ToolbarTitle,
+    Navbar,
+    Typography,
+    VirtualFooter,
+    VirtualHeader,
+    VirtualItem,
+    VirtualScroll
+  ],
   imports: [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-
-    ActionSheetModule.forRoot(),
-    AlertModule.forRoot(),
-    AppModule.forRoot(),
-    AvatarModule.forRoot(),
-    BackdropModule.forRoot(),
-    BadgeModule.forRoot(),
-    ButtonModule.forRoot(),
-    CardModule.forRoot(),
-    CheckboxModule.forRoot(),
-    ChipModule.forRoot(),
-    ClickBlockModule.forRoot(),
-    ContentModule.forRoot(),
-    DateTimeModule.forRoot(),
-    FabModule.forRoot(),
-    GridModule.forRoot(),
-    IconModule.forRoot(),
-    ImgModule.forRoot(),
-    InfiniteScrollModule.forRoot(),
-    InputModule.forRoot(),
-    ItemModule.forRoot(),
-    LabelModule.forRoot(),
-    ListModule.forRoot(),
-    LoadingModule.forRoot(),
-    MenuModule.forRoot(),
-    ModalModule.forRoot(),
-    NavModule.forRoot(),
-    NavbarModule.forRoot(),
-    NoteModule.forRoot(),
-    OptionModule.forRoot(),
-    PickerModule.forRoot(),
-    PopoverModule.forRoot(),
-    RadioModule.forRoot(),
-    RangeModule.forRoot(),
-    RefresherModule.forRoot(),
-    ScrollModule.forRoot(),
-    SearchbarModule.forRoot(),
-    SegmentModule.forRoot(),
-    SelectModule.forRoot(),
-    ShowHideWhenModule.forRoot(),
-    SlidesModule.forRoot(),
-    SpinnerModule.forRoot(),
-    SplitPaneModule.forRoot(),
-    TabsModule.forRoot(),
-    ThumbnailModule.forRoot(),
-    ToastModule.forRoot(),
-    ToggleModule.forRoot(),
-    ToolbarModule.forRoot(),
-    TypographyModule.forRoot(),
-    VirtualScrollModule.forRoot()
   ],
   exports: [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
 
-    ActionSheetModule,
-    AlertModule,
-    AppModule,
-    AvatarModule,
-    BackdropModule,
-    BadgeModule,
-    ButtonModule,
-    CardModule,
-    CheckboxModule,
-    ChipModule,
-    ClickBlockModule,
-    ContentModule,
-    DateTimeModule,
-    FabModule,
-    GridModule,
-    IconModule,
-    ImgModule,
-    InfiniteScrollModule,
-    InputModule,
-    ItemModule,
-    LabelModule,
-    ListModule,
-    LoadingModule,
-    MenuModule,
-    ModalModule,
-    NavModule,
-    NavbarModule,
-    NoteModule,
-    OptionModule,
-    PickerModule,
-    PopoverModule,
-    RadioModule,
-    RangeModule,
-    RefresherModule,
-    ScrollModule,
-    SearchbarModule,
-    SegmentModule,
-    SelectModule,
-    ShowHideWhenModule,
-    SlidesModule,
-    SpinnerModule,
-    SplitPaneModule,
-    TabsModule,
-    ThumbnailModule,
-    ToastModule,
-    ToggleModule,
-    ToolbarModule,
-    TypographyModule,
-    VirtualScrollModule
+    ActionSheetCmp,
+    AlertCmp,
+    ClickBlock,
+    IonicApp,
+    OverlayPortal,
+    Avatar,
+    Backdrop,
+    Badge,
+    Button,
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    Checkbox,
+    Chip,
+    Col,
+    Content,
+    DateTime,
+    FabButton,
+    FabContainer,
+    FabList,
+    Grid,
+    Img,
+    Icon,
+    InfiniteScroll,
+    InfiniteScrollContent,
+    Item,
+    ItemContent,
+    ItemDivider,
+    ItemGroup,
+    ItemOptions,
+    ItemReorder,
+    ItemSliding,
+    Label,
+    List,
+    ListHeader,
+    Reorder,
+    LoadingCmp,
+    NativeInput,
+    NextInput,
+    Menu,
+    MenuClose,
+    MenuToggle,
+    ModalCmp,
+    Nav,
+    NavPop,
+    NavPopAnchor,
+    NavPush,
+    NavPushAnchor,
+    Note,
+    Option,
+    PickerCmp,
+    PickerColumnCmp,
+    PopoverCmp,
+    RadioButton,
+    RadioGroup,
+    Range,
+    RangeKnob,
+    Refresher,
+    RefresherContent,
+    Row,
+    Scroll,
+    Searchbar,
+    Segment,
+    SegmentButton,
+    Select,
+    ShowWhen,
+    HideWhen,
+    Slide,
+    Slides,
+    Spinner,
+    SplitPane,
+    Tab,
+    TabButton,
+    TabHighlight,
+    Tabs,
+    TextInput,
+    Thumbnail,
+    ToastCmp,
+    Toggle,
+    Footer,
+    Header,
+    Toolbar,
+    ToolbarItem,
+    ToolbarTitle,
+    Navbar,
+    Typography,
+    VirtualFooter,
+    VirtualHeader,
+    VirtualItem,
+    VirtualScroll
+  ],
+  entryComponents: [
+    ActionSheetCmp,
+    AlertCmp,
+    IonicApp,
+    LoadingCmp,
+    ModalCmp,
+    PickerCmp,
+    PopoverCmp,
+    ToastCmp
   ]
 })
 export class IonicModule {
@@ -511,7 +596,7 @@ export class IonicModule {
         { provide: APP_INITIALIZER, useFactory: setupPreloading, deps: [ Config, DeepLinkConfigToken, ModuleLoader, NgZone ], multi: true },
 
         // useClass
-        // { provide: HAMMER_GESTURE_CONFIG, useClass: IonicGestureConfig },
+        { provide: HAMMER_GESTURE_CONFIG, useClass: IonicGestureConfig },
 
         // useValue
         { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: appRoot, multi: true },
@@ -530,9 +615,9 @@ export class IonicModule {
         Location,
         MenuController,
         ModalController,
+        NgModuleLoader,
         PickerController,
         PopoverController,
-        NgModuleLoader,
         TapClick,
         ToastController,
         TransitionController,

src/navigation/deep-linker.ts

@@ -5,10 +5,8 @@ import { App } from '../components/app/app';
 import { convertToViews, DIRECTION_BACK, isNav, isTab, isTabs, NavLink, NavSegment } from './nav-util';
 import { ModuleLoader } from '../util/module-loader';
 import { isArray, isPresent } from '../util/util';
-import { Nav } from '../components/nav/nav';
+import { Nav, Tab, Tabs } from './nav-interfaces';
 import { NavController } from './nav-controller';
-import { Tab } from '../components/tabs/tab';
-import { Tabs } from '../components/tabs/tabs';
 import { UrlSerializer } from './url-serializer';
 import { ViewController } from './view-controller';
 
@@ -77,7 +75,7 @@ export class DeepLinker {
       }
 
       // get the app's root nav
-      const appRootNav = <Nav>this._app.getRootNav();
+      const appRootNav = <Nav> (this._app.getRootNav() as any);
       if (appRootNav) {
         if (browserUrl === '/') {
           // a url change to the index url
@@ -90,17 +88,17 @@ export class DeepLinker {
             // the url change is to the root but we don't
             // already know the url used. So let's just
             // reset the root nav to its root page
-            appRootNav.goToRoot({
+            return appRootNav.goToRoot({
               updateUrl: false,
               isNavRoot: true
             });
-            return;
           }
         }
 
         // normal url
         this._segments = this._serializer.parse(browserUrl);
-        this._loadNavFromPath(appRootNav);
+        // this is so dirty I need a shower
+        this._loadNavFromPath(((appRootNav as any) as NavController));
       }
     }
   }

src/navigation/nav-interfaces.ts

@@ -0,0 +1,34 @@
+import { NavOptions } from './nav-util';
+
+export interface Nav {
+  goToRoot(opts: NavOptions): Promise<any>;
+};
+
+export interface Tabs {
+  _tabs: Tab[];
+  select(tabOrIndex: number | Tab, opts: NavOptions): void;
+  _top: number;
+  setTabbarPosition(top: number, bottom: number): void;
+};
+
+export interface Tab {
+  tabUrlPath: string;
+  tabTitle: string;
+  index: number;
+};
+
+export interface Content {
+  resize(): void;
+};
+
+export interface Footer {
+};
+
+export interface Header {
+};
+
+export interface Navbar {
+  setBackButtonText(backButtonText: string): void;
+  hideBackButton: boolean;
+  didEnter(): void;
+}

src/navigation/view-controller.ts

@@ -1,13 +1,10 @@
 import { ComponentRef, ElementRef, EventEmitter, Output, Renderer } from '@angular/core';
 
-import { Footer } from '../components/toolbar/toolbar-footer';
-import { Header } from '../components/toolbar/toolbar-header';
 import { isPresent, assert } from '../util/util';
-import { Navbar } from '../components/navbar/navbar';
 import { NavController } from './nav-controller';
 import { NavOptions, STATE_NEW, STATE_INITIALIZED, STATE_ATTACHED, STATE_DESTROYED } from './nav-util';
 import { NavParams } from './nav-params';
-import { Content } from '../components/content/content';
+import { Content, Footer, Header, Navbar } from './nav-interfaces';
 
 
 /**

src/util/mock-providers.ts

@@ -14,7 +14,7 @@ import { Keyboard } from '../platform/keyboard';
 import { Menu } from '../components/menu/menu';
 import { NavOptions } from '../navigation/nav-util';
 import { NavControllerBase } from '../navigation/nav-controller-base';
-import { OverlayPortal } from '../components/nav/overlay-portal';
+import { OverlayPortal } from '../components/app/overlay-portal';
 import { PageTransition } from '../transitions/page-transition';
 import { Platform } from '../platform/platform';
 import { QueryParams } from '../platform/query-params';