refactor(components): convert components to separate modules

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

@@ -0,0 +1,33 @@
+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';
+
+@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

@@ -0,0 +1,33 @@
+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';
+
+@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.module.ts

@@ -0,0 +1,27 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { IonicApp } from './app-root';
+
+import { NavModule } from '../nav/nav.module';
+
+@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,7 +3,7 @@ import { Title, DOCUMENT } from '@angular/platform-browser';
 
 import { IonicApp } from './app-root';
 import * as Constants from './app-constants';
-import { ClickBlock } from '../../util/click-block';
+import { ClickBlock } from '../click-block/click-block';
 import { runInDev } from '../../util/util';
 import { Config } from '../../config/config';
 import { isNav, NavOptions, DIRECTION_FORWARD, DIRECTION_BACK } from '../../navigation/nav-util';

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

@@ -1,5 +1,5 @@
 import { App } from '../app';
-import { ClickBlock } from '../../../util/click-block';
+import { ClickBlock } from '../../click-block/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';

src/components/avatar/avatar.module.ts

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

src/components/backdrop/backdrop.module.ts

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

src/components/badge/badge.module.ts

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

src/components/button/button.module.ts

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

src/components/card/card.module.ts

@@ -0,0 +1,28 @@
+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';
+
+@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

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

src/components/chip/chip.module.ts

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

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

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

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

@@ -1,8 +1,8 @@
 import { Directive, ElementRef, forwardRef, Inject, Renderer } from '@angular/core';
 
-import { App } from '../components/app/app';
-import { Config } from '../config/config';
-import { Platform } from '../platform/platform';
+import { App } from '../app/app';
+import { Config } from '../../config/config';
+import { Platform } from '../../platform/platform';
 
 
 /**

src/components/content/content.module.ts

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

src/components/datetime/datetime.module.ts

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

src/components/fab/fab.module.ts

@@ -0,0 +1,30 @@
+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';
+
+@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

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

src/components/img/img.module.ts

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

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

@@ -0,0 +1,29 @@
+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';
+
+@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

@@ -0,0 +1,32 @@
+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';
+
+@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.module.ts

@@ -0,0 +1,49 @@
+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';
+
+@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

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

src/components/list/list.module.ts

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

src/components/loading/loading.module.ts

@@ -0,0 +1,31 @@
+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';
+
+@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.module.ts

@@ -0,0 +1,30 @@
+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';
+
+@NgModule({
+  imports: [
+    BackdropModule
+  ],
+  declarations: [
+    Menu,
+    MenuClose,
+    MenuToggle
+  ],
+  exports: [
+    Menu,
+    MenuClose,
+    MenuToggle
+  ]
+})
+export class MenuModule {
+  public static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MenuModule, providers: []
+    };
+  }
+}

src/components/modal/modal.module.ts

@@ -0,0 +1,27 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { BackdropModule } from '../backdrop/backdrop.module';
+
+import { ModalCmp } from './modal-component';
+
+@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

@@ -0,0 +1,34 @@
+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';
+
+@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/navbar/navbar.module.ts

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

src/components/note/note.module.ts

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

src/components/option/option.module.ts

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

src/components/picker/picker.module.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { BackdropModule } from '../backdrop/backdrop.module';
+
+import { PickerCmp } from './picker-component';
+import { PickerColumnCmp } from './picker-column';
+
+@NgModule({
+  imports: [
+    BackdropModule,
+    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

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

src/components/radio/radio.module.ts

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

src/components/range/range.module.ts

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

src/components/refresher/refresher.module.ts

@@ -0,0 +1,31 @@
+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';
+
+@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

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

src/components/searchbar/searchbar.module.ts

@@ -0,0 +1,26 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { ButtonModule } from '../button/button.module';
+import { IconModule } from '../icon/icon.module';
+
+import { Searchbar } from './searchbar';
+
+@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

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

src/components/select/select.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { Select } from './select';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    Select
+  ],
+  exports: [
+    Select
+  ]
+})
+export class SelectModule {
+  public static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: SelectModule, providers: []
+    };
+  }
+}

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

@@ -0,0 +1,55 @@
+import { NgZone } from '@angular/core';
+
+import { Platform } from '../../platform/platform';
+
+
+/**
+ * @hidden
+ */
+export class DisplayWhen {
+  isMatch: boolean = false;
+  conditions: string[];
+  resizeObs: any;
+
+  constructor(conditions: string, public _plt: Platform, public zone: NgZone) {
+    if (!conditions) return;
+
+    this.conditions = conditions.replace(/\s/g, '').split(',');
+
+    // check if its one of the matching platforms first
+    // a platform does not change during the life of an app
+    for (let i = 0; i < this.conditions.length; i++) {
+      if (this.conditions[i] && _plt.is(this.conditions[i])) {
+        this.isMatch = true;
+        return;
+      }
+    }
+
+    if (this.orientation()) {
+      // add window resize listener
+      this.resizeObs = _plt.resize.subscribe(this.orientation.bind(this));
+    }
+
+  }
+
+  orientation(): boolean {
+    for (let i = 0; i < this.conditions.length; i++) {
+
+      if (this.conditions[i] === 'portrait') {
+        this.isMatch = this._plt.isPortrait();
+        return true;
+      }
+
+      if (this.conditions[i] === 'landscape') {
+        this.isMatch = this._plt.isLandscape();
+        return true;
+      }
+    }
+    return false;
+  }
+
+  ngOnDestroy() {
+    this.resizeObs && this.resizeObs.unsubscribe();
+    this.resizeObs = null;
+  }
+}

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

@@ -2,7 +2,7 @@ import { Attribute, Directive, NgZone } from '@angular/core';
 
 import { Platform } from '../../platform/platform';
 
-import { DisplayWhen } from './show-hide-when';
+import { DisplayWhen } from './display-when';
 
 /**
  * @name HideWhen

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

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

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

@@ -1,59 +1,10 @@
 import { Attribute, Directive, NgZone } from '@angular/core';
 
+import { DisplayWhen } from './display-when';
+
 import { Platform } from '../../platform/platform';
 
 
-/**
- * @hidden
- */
-export class DisplayWhen {
-  isMatch: boolean = false;
-  conditions: string[];
-  resizeObs: any;
-
-  constructor(conditions: string, public _plt: Platform, public zone: NgZone) {
-    if (!conditions) return;
-
-    this.conditions = conditions.replace(/\s/g, '').split(',');
-
-    // check if its one of the matching platforms first
-    // a platform does not change during the life of an app
-    for (let i = 0; i < this.conditions.length; i++) {
-      if (this.conditions[i] && _plt.is(this.conditions[i])) {
-        this.isMatch = true;
-        return;
-      }
-    }
-
-    if (this.orientation()) {
-      // add window resize listener
-      this.resizeObs = _plt.resize.subscribe(this.orientation.bind(this));
-    }
-
-  }
-
-  orientation(): boolean {
-    for (let i = 0; i < this.conditions.length; i++) {
-
-      if (this.conditions[i] === 'portrait') {
-        this.isMatch = this._plt.isPortrait();
-        return true;
-      }
-
-      if (this.conditions[i] === 'landscape') {
-        this.isMatch = this._plt.isLandscape();
-        return true;
-      }
-    }
-    return false;
-  }
-
-  ngOnDestroy() {
-    this.resizeObs && this.resizeObs.unsubscribe();
-    this.resizeObs = null;
-  }
-}
-
 /**
  *
  * @name ShowWhen
@@ -111,6 +62,5 @@ export class ShowWhen extends DisplayWhen {
     super(showWhen, plt, zone);
   }
 
-  // ngOnDestroy is implemente in DisplayWhen
-
+  // ngOnDestroy is implemented in DisplayWhen
 }

src/components/slides/slides.module.ts

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

src/components/spinner/spinner.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { Spinner } from './spinner';
+
+@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

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

src/components/tabs/tabs.module.ts

@@ -0,0 +1,37 @@
+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';
+
+@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/thumbnail/thumbnail.module.ts

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

src/components/toast/toast.module.ts

@@ -0,0 +1,31 @@
+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';
+
+@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.module.ts

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

src/components/toolbar/toolbar.module.ts

@@ -0,0 +1,35 @@
+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';
+
+@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

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

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

@@ -0,0 +1,28 @@
+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';
+
+@NgModule({
+  declarations: [
+    VirtualFooter,
+    VirtualHeader,
+    VirtualItem,
+    VirtualScroll
+  ],
+  exports: [
+    VirtualFooter,
+    VirtualHeader,
+    VirtualItem,
+    VirtualScroll
+  ]
+})
+export class VirtualScrollModule {
+  public static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: VirtualScrollModule, providers: []
+    };
+  }
+}

src/index.ts

@@ -46,106 +46,111 @@ import { UrlSerializer, setupUrlSerializer, DeepLinkConfigToken } from './naviga
 
 
 /**
- * Import Overlay Entry Components
+ * Import Modules
  */
-import { ActionSheetCmp } from './components/action-sheet/action-sheet-component';
-import { AlertCmp } from './components/alert/alert-component';
-import { IonicApp } from './components/app/app-root';
-import { LoadingCmp } from './components/loading/loading-component';
-import { ModalCmp } from './components/modal/modal-component';
-import { PickerCmp } from './components/picker/picker-component';
-import { PopoverCmp } from './components/popover/popover-component';
-import { ToastCmp } from './components/toast/toast-component';
+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 Components
+ * Export Modules
  */
-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 { ClickBlock } from './util/click-block';
-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 { 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 { ItemReorder } from './components/item/item-reorder';
-import { Reorder } from './components/item/reorder';
-import { ItemSliding } from './components/item/item-sliding';
-import { ItemOptions } from './components/item/item-options';
-import { Label } from './components/label/label';
-import { List } from './components/list/list';
-import { ListHeader } from './components/list/list-header';
-import { Menu } from './components/menu/menu';
-import { MenuClose } from './components/menu/menu-close';
-import { MenuToggle } from './components/menu/menu-toggle';
-import { NativeInput } from './components/input/native-input';
-import { NextInput } from './components/input/next-input';
-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 { Navbar } from './components/navbar/navbar';
-import { Note } from './components/note/note';
-import { Option } from './components/option/option';
-import { OverlayPortal } from './components/nav/overlay-portal';
-import { PickerColumnCmp } from './components/picker/picker-column';
-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 { SegmentButton } from './components/segment/segment-button';
-import { Select } from './components/select/select';
-import { ShowWhen } from './components/show-hide-when/show-hide-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 { Tabs } from './components/tabs/tabs';
-import { TabButton } from './components/tabs/tab-button';
-import { TabHighlight } from './components/tabs/tab-highlight';
-import { TextInput } from './components/input/input';
-import { Thumbnail } from './components/thumbnail/thumbnail';
-import { Toggle } from './components/toggle/toggle';
-import { Toolbar } from './components/toolbar/toolbar';
-import { Header } from './components/toolbar/toolbar-header';
-import { Footer } from './components/toolbar/toolbar-footer';
-import { ToolbarItem } from './components/toolbar/toolbar-item';
-import { ToolbarTitle } from './components/toolbar/toolbar-title';
-import { Typography } from './components/typography/typography';
-import { VirtualScroll } from './components/virtual-scroll/virtual-scroll';
-
-import { VirtualItem } from './components/virtual-scroll/virtual-item';
-import { VirtualHeader } from './components/virtual-scroll/virtual-header';
-import { VirtualFooter } from './components/virtual-scroll/virtual-footer';
-
+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
@@ -167,7 +172,7 @@ 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 './util/click-block';
+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';
@@ -235,8 +240,8 @@ export { Searchbar } from './components/searchbar/searchbar';
 export { Segment } from './components/segment/segment';
 export { SegmentButton } from './components/segment/segment-button';
 export { Select } from './components/select/select';
-export { ShowWhen } from './components/show-hide-when/show-hide-when';
-export { DisplayWhen } from './components/show-hide-when/show-hide-when';
+export { ShowWhen } from './components/show-hide-when/show-when';
+export { DisplayWhen } from './components/show-hide-when/display-when';
 export { HideWhen } from './components/show-hide-when/hide-when';
 export { Slide } from './components/slides/slide';
 export { Slides } from './components/slides/slides';
@@ -359,201 +364,111 @@ export { IonicGestureConfig } from './gestures/gesture-config';
     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,
 
-    Avatar,
-    Backdrop,
-    Badge,
-    Button,
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle,
-    Checkbox,
-    Chip,
-    ClickBlock,
-    Col,
-    Content,
-    DateTime,
-    FabContainer,
-    FabButton,
-    FabList,
-    Footer,
-    Grid,
-    Header,
-    HideWhen,
-    Icon,
-    Img,
-    InfiniteScroll,
-    InfiniteScrollContent,
-    IonicApp,
-    Item,
-    ItemContent,
-    ItemDivider,
-    ItemGroup,
-    ItemOptions,
-    ItemReorder,
-    ItemSliding,
-    Label,
-    List,
-    ListHeader,
-    Menu,
-    MenuClose,
-    MenuToggle,
-    NativeInput,
-    Nav,
-    Navbar,
-    NavPop,
-    NavPopAnchor,
-    NavPush,
-    NavPushAnchor,
-    NextInput,
-    Note,
-    Option,
-    OverlayPortal,
-    PickerColumnCmp,
-    RadioButton,
-    RadioGroup,
-    Range,
-    RangeKnob,
-    Refresher,
-    RefresherContent,
-    Reorder,
-    Row,
-    Scroll,
-    Searchbar,
-    Segment,
-    SegmentButton,
-    Select,
-    ShowWhen,
-    Slide,
-    Slides,
-    Spinner,
-    SplitPane,
-    Tab,
-    Tabs,
-    TabButton,
-    TabHighlight,
-    TextInput,
-    Thumbnail,
-    Toggle,
-    Toolbar,
-    ToolbarItem,
-    ToolbarTitle,
-    Typography,
-    VirtualFooter,
-    VirtualHeader,
-    VirtualItem,
-    VirtualScroll,
-  ],
-  declarations: [
-    ActionSheetCmp,
-    AlertCmp,
-    ClickBlock,
-    LoadingCmp,
-    ModalCmp,
-    PickerCmp,
-    PopoverCmp,
-    ToastCmp,
-
-    Avatar,
-    Backdrop,
-    Badge,
-    Button,
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle,
-    Checkbox,
-    Chip,
-    ClickBlock,
-    Col,
-    Content,
-    DateTime,
-    FabContainer,
-    FabButton,
-    FabList,
-    Footer,
-    Grid,
-    Header,
-    HideWhen,
-    Icon,
-    Img,
-    InfiniteScroll,
-    InfiniteScrollContent,
-    IonicApp,
-    Item,
-    ItemContent,
-    ItemDivider,
-    ItemGroup,
-    ItemOptions,
-    ItemReorder,
-    ItemSliding,
-    Label,
-    List,
-    ListHeader,
-    Menu,
-    MenuClose,
-    MenuToggle,
-    NativeInput,
-    Nav,
-    Navbar,
-    NavPop,
-    NavPopAnchor,
-    NavPush,
-    NavPushAnchor,
-    NextInput,
-    Note,
-    Option,
-    OverlayPortal,
-    PickerColumnCmp,
-    RadioButton,
-    RadioGroup,
-    Range,
-    RangeKnob,
-    Refresher,
-    RefresherContent,
-    Reorder,
-    Row,
-    Scroll,
-    Searchbar,
-    Segment,
-    SegmentButton,
-    Select,
-    ShowWhen,
-    Slide,
-    Slides,
-    Spinner,
-    SplitPane,
-    Tab,
-    Tabs,
-    TabButton,
-    TabHighlight,
-    TextInput,
-    Thumbnail,
-    Toggle,
-    Toolbar,
-    ToolbarItem,
-    ToolbarTitle,
-    Typography,
-    VirtualFooter,
-    VirtualHeader,
-    VirtualItem,
-    VirtualScroll,
-  ],
-  entryComponents: [
-    ActionSheetCmp,
-    AlertCmp,
-    IonicApp,
-    LoadingCmp,
-    ModalCmp,
-    PickerCmp,
-    PopoverCmp,
-    ToastCmp
+    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
   ]
 })
 export class IonicModule {