refactor(angular): refactor ionic/angular modules

angular/src/components.d.ts

@@ -0,0 +1,28 @@
+/**
+ * This is an autogenerated file created by the Stencil build process.
+ * It contains typing information for all components that exist in this project
+ * and imports for stencil collections that might be configured in your stencil.config.js file
+ */
+
+import '@stencil/core';
+
+declare global {
+  namespace JSX {
+    interface Element {}
+    export interface IntrinsicElements {}
+  }
+  namespace JSXElements {}
+
+  interface HTMLStencilElement extends HTMLElement {
+    componentOnReady(): Promise<this>;
+    componentOnReady(done: (ele?: this) => void): void;
+
+    forceUpdate(): void;
+  }
+
+  interface HTMLAttributes {}
+}
+
+import 'ionicons';
+import '@ionic/core';
+

angular/src/control-value-accessors/boolean-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { setIonicClasses } from './util/set-ionic-classes';
@@ -15,7 +15,8 @@ import { setIonicClasses } from './util/set-ionic-classes';
   ]
 })
 export class BooleanValueAccessor implements ControlValueAccessor {
-  constructor(private element: ElementRef, private renderer: Renderer2) {
+
+  constructor(private element: ElementRef) {
     this.onChange = () => {/**/};
     this.onTouched = () => {/**/};
   }
@@ -24,14 +25,15 @@ export class BooleanValueAccessor implements ControlValueAccessor {
   onTouched: () => void;
 
   writeValue(value: any) {
-    this.renderer.setProperty(this.element.nativeElement, 'checked', value);
+    this.element.nativeElement.checked = value;
     setIonicClasses(this.element);
   }
 
   @HostListener('ionChange', ['$event.target.checked'])
   _handleIonChange(value: any) {
     this.onChange(value);
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
@@ -39,24 +41,21 @@ export class BooleanValueAccessor implements ControlValueAccessor {
   @HostListener('ionBlur')
   _handleBlurEvent() {
     this.onTouched();
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
 
-  registerOnChange(fn: (value: any) => void): void {
+  registerOnChange(fn: (value: any) => void) {
     this.onChange = fn;
   }
 
-  registerOnTouched(fn: () => void): void {
+  registerOnTouched(fn: () => void) {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
+  setDisabledState(isDisabled: boolean) {
-    this.renderer.setProperty(
+    this.element.nativeElement.disabled = isDisabled;
-      this.element.nativeElement,
-      'disabled',
-      isDisabled
-    );
   }
 }

angular/src/control-value-accessors/numeric-value-accesssor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { setIonicClasses } from './util/set-ionic-classes';
@@ -15,7 +15,8 @@ import { setIonicClasses } from './util/set-ionic-classes';
   ]
 })
 export class NumericValueAccessor implements ControlValueAccessor {
-  constructor(private element: ElementRef, private renderer: Renderer2) {
+
+  constructor(private element: ElementRef) {
     this.onChange = () => {/**/};
     this.onTouched = () => {/**/};
   }
@@ -23,49 +24,42 @@ export class NumericValueAccessor implements ControlValueAccessor {
   onChange: (value: any) => void;
   onTouched: () => void;
 
-  writeValue(value: any): void {
+  writeValue(value: any) {
     // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
     // Probably not an issue for us, but it doesn't really cost anything either
-    const normalizedValue = value == null ? '' : value;
+    this.element.nativeElement.value = value == null ? '' : value;
-    this.renderer.setProperty(
-      this.element.nativeElement,
-      'value',
-      normalizedValue
-    );
     setIonicClasses(this.element);
   }
 
   @HostListener('input', ['$event.target.value'])
-  _handleInputEvent(value: any): void {
+  _handleInputEvent(value: any) {
     this.onChange(value);
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
 
   @HostListener('ionBlur')
-  _handleBlurEvent(): void {
+  _handleBlurEvent() {
     this.onTouched();
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
 
-  registerOnChange(fn: (_: number | null) => void): void {
+  registerOnChange(fn: (_: number | null) => void) {
     this.onChange = value => {
       fn(value === '' ? null : parseFloat(value));
     };
   }
 
-  registerOnTouched(fn: () => void): void {
+  registerOnTouched(fn: () => void) {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
+  setDisabledState(isDisabled: boolean) {
-    this.renderer.setProperty(
+    this.element.nativeElement.disabled = isDisabled;
-      this.element.nativeElement,
-      'disabled',
-      isDisabled
-    );
   }
 }

angular/src/control-value-accessors/radio-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { setIonicClasses } from './util/set-ionic-classes';
@@ -20,24 +20,24 @@ export class RadioValueAccessor implements ControlValueAccessor {
   onChange: (value: any) => void;
   onTouched: () => void;
 
-  constructor(private element: ElementRef, private renderer: Renderer2) {
+  constructor(private element: ElementRef) {
     this.onChange = () => {/**/};
     this.onTouched = () => {/**/};
   }
 
   writeValue(value: any) {
-    this.renderer.setProperty(
+    this.element.nativeElement.checked = this.value = value;
-      this.element.nativeElement,
+
-      'checked',
+    requestAnimationFrame(() => {
-      value === this.value
-    );
       setIonicClasses(this.element);
+    });
   }
 
   @HostListener('ionSelect', ['$event.target.checked'])
   _handleIonSelect(value: any) {
     this.onChange(value);
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
@@ -45,26 +45,23 @@ export class RadioValueAccessor implements ControlValueAccessor {
   @HostListener('ionBlur')
   _handleBlurEvent() {
     this.onTouched();
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
 
-  registerOnChange(fn: (value: any) => void): void {
+  registerOnChange(fn: (value: any) => void) {
     this.onChange = () => {
       fn(this.value);
     };
   }
 
-  registerOnTouched(fn: () => void): void {
+  registerOnTouched(fn: () => void) {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
+  setDisabledState(isDisabled: boolean) {
-    this.renderer.setProperty(
+    this.element.nativeElement.disabled = isDisabled;
-      this.element.nativeElement,
-      'disabled',
-      isDisabled
-    );
   }
 }

angular/src/control-value-accessors/select-value-accessor.ts

@@ -1,10 +1,8 @@
-import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { setIonicClasses } from './util/set-ionic-classes';
 
-// NOTE: May need to look at this to see if we need anything else:
-// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
 @Directive({
   /* tslint:disable-next-line:directive-selector */
   selector: 'ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime',
@@ -17,7 +15,8 @@ import { setIonicClasses } from './util/set-ionic-classes';
   ]
 })
 export class SelectValueAccessor implements ControlValueAccessor {
-  constructor(private element: ElementRef, private renderer: Renderer2) {
+
+  constructor(private element: ElementRef) {
     this.onChange = () => {/**/};
     this.onTouched = () => {/**/};
   }
@@ -26,14 +25,18 @@ export class SelectValueAccessor implements ControlValueAccessor {
   onTouched: () => void;
 
   writeValue(value: any) {
-    this.renderer.setProperty(this.element.nativeElement, 'value', value);
+    this.element.nativeElement.value = value;
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
+    });
   }
 
   @HostListener('ionChange', ['$event.target.value'])
   _handleChangeEvent(value: any) {
     this.onChange(value);
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
@@ -41,7 +44,8 @@ export class SelectValueAccessor implements ControlValueAccessor {
   @HostListener('ionBlur')
   _handleBlurEvent() {
     this.onTouched();
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
@@ -54,11 +58,7 @@ export class SelectValueAccessor implements ControlValueAccessor {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
+  setDisabledState(isDisabled: boolean) {
-    this.renderer.setProperty(
+    this.element.nativeElement.disabled = isDisabled;
-      this.element.nativeElement,
-      'disabled',
-      isDisabled
-    );
   }
 }

angular/src/control-value-accessors/text-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { setIonicClasses } from './util/set-ionic-classes';
@@ -15,7 +15,8 @@ import { setIonicClasses } from './util/set-ionic-classes';
   ]
 })
 export class TextValueAccessor implements ControlValueAccessor {
-  constructor(private element: ElementRef, private renderer: Renderer2) {
+
+  constructor(private element: ElementRef) {
     this.onChange = () => {/**/};
     this.onTouched = () => {/**/};
   }
@@ -24,14 +25,18 @@ export class TextValueAccessor implements ControlValueAccessor {
   onTouched: () => void;
 
   writeValue(value: any) {
-    this.renderer.setProperty(this.element.nativeElement, 'value', value);
+    this.element.nativeElement.value = value;
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
+    });
   }
 
   @HostListener('input', ['$event.target.value'])
   _handleInputEvent(value: any) {
     this.onChange(value);
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
@@ -39,7 +44,8 @@ export class TextValueAccessor implements ControlValueAccessor {
   @HostListener('ionBlur')
   _handleBlurEvent() {
     this.onTouched();
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       setIonicClasses(this.element);
     });
   }
@@ -52,11 +58,7 @@ export class TextValueAccessor implements ControlValueAccessor {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
+  setDisabledState(isDisabled: boolean) {
-    this.renderer.setProperty(
+    this.element.nativeElement.disabled = isDisabled;
-      this.element.nativeElement,
-      'disabled',
-      isDisabled
-    );
   }
 }

angular/src/directives/icon.ts

@@ -0,0 +1,45 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+import { inputs } from './proxies';
+
+
+@Directive({ selector: 'ion-icon' })
+export class Icon {
+
+  /**
+   * The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Input() color: string;
+
+  /**
+   * Specifies the label to use for accessibility. Defaults to the icon name.
+   */
+  @Input() ariaLabel = '';
+
+  /**
+   * Specifies which icon to use on `ios` mode.
+   */
+  @Input() ios = '';
+
+  /**
+   * Specifies which icon to use on `md` mode.
+   */
+  @Input() md = '';
+
+  /**
+   * Specifies which icon to use. The appropriate icon will be used based on the mode.
+   * For more information, see [Ionicons](/docs/ionicons/).
+   */
+  @Input() name = '';
+
+  /**
+   * The size of the icon.
+   * Available options are: `"small"` and `"large"`.
+   */
+  @Input() size: string;
+
+  constructor(el: ElementRef) {
+    inputs(this, el, ['color', 'ariaLabel', 'ios', 'md', 'name', 'size']);
+  }
+}

angular/src/index.ts

@@ -1,18 +1,6 @@
-export { IonicAngularModule } from './module';
+export { IonicModule } from './module';
 
-/* Navigation */
+// providers
-export { IonNav } from './navigation/ion-nav';
-export { IonRouterOutlet } from './navigation/ion-router-outlet';
-export { IonTab } from './navigation/ion-tab';
-export { IonTabs } from './navigation/ion-tabs';
-
-/* Directives */
-export { VirtualScroll } from './directives/virtual-scroll';
-export { VirtualItem } from './directives/virtual-item';
-export { VirtualHeader } from './directives/virtual-header';
-export { VirtualFooter } from './directives/virtual-footer';
-
-/* Providers */
 export { AngularDelegate } from './providers/angular-delegate';
 export { ActionSheetController } from './providers/action-sheet-controller';
 export { AlertController } from './providers/alert-controller';
@@ -25,36 +13,109 @@ export { Platform } from './providers/platform';
 export { PopoverController } from './providers/popover-controller';
 export { ToastController } from './providers/toast-controller';
 
+// navigation
+export { Nav } from './navigation/ion-nav';
+export { IonRouterOutlet } from './navigation/ion-router-outlet';
+export { Tab } from './navigation/ion-tab';
+export { Tabs } from './navigation/ion-tabs';
+
+// directives
+export { Icon } from './directives/icon';
+export { VirtualScroll } from './directives/virtual-scroll';
+export { VirtualItem } from './directives/virtual-item';
+export { VirtualHeader } from './directives/virtual-header';
+export { VirtualFooter } from './directives/virtual-footer';
+
+// directive proxies
+export {
+  Anchor,
+  App,
+  Avatar,
+  BackButton,
+  Backdrop,
+  Badge,
+  Button,
+  Buttons,
+  Card,
+  CardContent,
+  CardHeader,
+  CardSubtitle,
+  CardTitle,
+  Checkbox,
+  Chip,
+  ChipButton,
+  Col,
+  Content,
+  CordovaPlatform,
+  Datetime,
+  Fab,
+  FabButton,
+  FabList,
+  Footer,
+  Gesture,
+  GestureController,
+  Grid,
+  Header,
+  HideWhen,
+  InfiniteScroll,
+  InfiniteScrollContent,
+  Input,
+  Item,
+  ItemDivider,
+  ItemGroup,
+  ItemOption,
+  ItemOptions,
+  ItemSliding,
+  Label,
+  List,
+  ListHeader,
+  Menu,
+  MenuButton,
+  MenuToggle,
+  NavPop,
+  NavPush,
+  NavSetRoot,
+  Note,
+  Radio,
+  RadioGroup,
+  Range,
+  RangeKnob,
+  Refresher,
+  RefresherContent,
+  Reorder,
+  ReorderGroup,
+  RippleEffect,
+  Route,
+  RouteRedirect,
+  Router,
+  RouterOutlet,
+  Row,
+  Scroll,
+  Searchbar,
+  Segment,
+  SegmentButton,
+  Select,
+  SelectOption,
+  SelectPopover,
+  ShowWhen,
+  SkeletonText,
+  Slide,
+  Slides,
+  Spinner,
+  SplitPane,
+  StatusTap,
+  TabButton,
+  Tabbar,
+  TapClick,
+  Text,
+  Textarea,
+  Thumbnail,
+  Toggle,
+  Toolbar,
+  ToolbarTitle
+} from './directives/proxies';
+
 export * from './types/interfaces';
 
-
+/*tslint:disable*/
-import { IonicWindow } from './types/interfaces';
+import './ionic-angular';
-
-const win = (window as IonicWindow);
-const Ionic = win.Ionic;
-
-if (Ionic) {
-  Ionic.ael = function ngAddEventListener(elm, eventName, cb, opts) {
-    if (elm.__zone_symbol__addEventListener) {
-      elm.__zone_symbol__addEventListener(eventName, cb, opts);
-    } else {
-      elm.addEventListener(eventName, cb, opts);
-    }
-  };
-
-  Ionic.rel = function ngRemoveEventListener(elm, eventName, cb, opts) {
-    if (elm.__zone_symbol__removeEventListener) {
-      elm.__zone_symbol__removeEventListener(eventName, cb, opts);
-    } else {
-      elm.removeEventListener(eventName, cb, opts);
-    }
-  };
-
-  Ionic.raf = function ngRequestAnimationFrame(cb: any) {
-    if (win.__zone_symbol__requestAnimationFrame) {
-      win.__zone_symbol__requestAnimationFrame(cb);
-    } else {
-      win.requestAnimationFrame(cb);
-    }
-  };
-}

angular/src/ionic-angular.ts

@@ -0,0 +1,32 @@
+/*tslint:disable*/
+import './ionic';
+import { IonicWindow } from './types/interfaces';
+
+const win = (window as IonicWindow);
+const Ionic = win.Ionic;
+
+if (Ionic) {
+  Ionic.ael = function ngAddEventListener(elm, eventName, cb, opts) {
+    if (elm.__zone_symbol__addEventListener) {
+      elm.__zone_symbol__addEventListener(eventName, cb, opts);
+    } else {
+      elm.addEventListener(eventName, cb, opts);
+    }
+  };
+
+  Ionic.rel = function ngRemoveEventListener(elm, eventName, cb, opts) {
+    if (elm.__zone_symbol__removeEventListener) {
+      elm.__zone_symbol__removeEventListener(eventName, cb, opts);
+    } else {
+      elm.removeEventListener(eventName, cb, opts);
+    }
+  };
+
+  Ionic.raf = function ngRequestAnimationFrame(cb: any) {
+    if (win.__zone_symbol__requestAnimationFrame) {
+      win.__zone_symbol__requestAnimationFrame(cb);
+    } else {
+      win.requestAnimationFrame(cb);
+    }
+  };
+}

angular/src/ionic.ts

@@ -0,0 +1,3 @@
+
+// placeholder for ionic loader js
+// created by the stencil build process

angular/src/module.ts

@@ -1,30 +1,22 @@
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import {
-  APP_INITIALIZER,
-  CUSTOM_ELEMENTS_SCHEMA,
-  ModuleWithProviders,
-  NgModule
-} from '@angular/core';
 
+// inputs
 import { BooleanValueAccessor } from './control-value-accessors/boolean-value-accessor';
 import { NumericValueAccessor } from './control-value-accessors/numeric-value-accesssor';
 import { RadioValueAccessor } from './control-value-accessors/radio-value-accessor';
 import { SelectValueAccessor } from './control-value-accessors/select-value-accessor';
 import { TextValueAccessor } from './control-value-accessors/text-value-accessor';
 
-/* Navigation */
+// navigation
-import { IonNav } from './navigation/ion-nav';
+import { Nav } from './navigation/ion-nav';
+import { Tab } from './navigation/ion-tab';
+import { Tabs } from './navigation/ion-tabs';
+
+// router
 import { IonRouterOutlet } from './navigation/ion-router-outlet';
-import { IonTab } from './navigation/ion-tab';
-import { IonTabs } from './navigation/ion-tabs';
 
-/* Directives */
+// providers
-import { VirtualScroll } from './directives/virtual-scroll';
-import { VirtualItem } from './directives/virtual-item';
-import { VirtualHeader } from './directives/virtual-header';
-import { VirtualFooter } from './directives/virtual-footer';
-
-/* Providers */
 import { AngularDelegate } from './providers/angular-delegate';
 import { ActionSheetController } from './providers/action-sheet-controller';
 import { AlertController } from './providers/alert-controller';
@@ -37,28 +29,306 @@ import { Platform } from './providers/platform';
 import { PopoverController } from './providers/popover-controller';
 import { ToastController } from './providers/toast-controller';
 
+// directives
+import { Icon } from './directives/icon';
+import { VirtualScroll } from './directives/virtual-scroll';
+import { VirtualItem } from './directives/virtual-item';
+import { VirtualHeader } from './directives/virtual-header';
+import { VirtualFooter } from './directives/virtual-footer';
+
+// directive proxies
+import {
+  Anchor,
+  App,
+  Avatar,
+  BackButton,
+  Backdrop,
+  Badge,
+  Button,
+  Buttons,
+  Card,
+  CardContent,
+  CardHeader,
+  CardSubtitle,
+  CardTitle,
+  Checkbox,
+  Chip,
+  ChipButton,
+  Col,
+  Content,
+  CordovaPlatform,
+  Datetime,
+  Fab,
+  FabButton,
+  FabList,
+  Footer,
+  Gesture,
+  GestureController,
+  Grid,
+  Header,
+  HideWhen,
+  InfiniteScroll,
+  InfiniteScrollContent,
+  Input,
+  Item,
+  ItemDivider,
+  ItemGroup,
+  ItemOption,
+  ItemOptions,
+  ItemSliding,
+  Label,
+  List,
+  ListHeader,
+  Menu,
+  MenuButton,
+  MenuToggle,
+  NavPop,
+  NavPush,
+  NavSetRoot,
+  Note,
+  Radio,
+  RadioGroup,
+  Range,
+  RangeKnob,
+  Refresher,
+  RefresherContent,
+  Reorder,
+  ReorderGroup,
+  RippleEffect,
+  Route,
+  RouteRedirect,
+  Router,
+  RouterOutlet,
+  Row,
+  Scroll,
+  Searchbar,
+  Segment,
+  SegmentButton,
+  Select,
+  SelectOption,
+  SelectPopover,
+  ShowWhen,
+  SkeletonText,
+  Slide,
+  Slides,
+  Spinner,
+  SplitPane,
+  StatusTap,
+  TabButton,
+  Tabbar,
+  TapClick,
+  Text,
+  Textarea,
+  Thumbnail,
+  Toggle,
+  Toolbar,
+  ToolbarTitle,
+} from './directives/proxies';
+
+
 @NgModule({
   declarations: [
-    BooleanValueAccessor,
+    Anchor,
-    IonNav,
+    App,
+    Avatar,
+    BackButton,
+    Backdrop,
+    Badge,
+    Button,
+    Buttons,
+    Card,
+    CardContent,
+    CardHeader,
+    CardSubtitle,
+    CardTitle,
+    Checkbox,
+    Chip,
+    ChipButton,
+    Col,
+    Content,
+    CordovaPlatform,
+    Datetime,
+    Fab,
+    FabButton,
+    FabList,
+    Footer,
+    Gesture,
+    GestureController,
+    Grid,
+    Header,
+    HideWhen,
+    Icon,
+    InfiniteScroll,
+    InfiniteScrollContent,
+    Input,
+    Item,
+    ItemDivider,
+    ItemGroup,
+    ItemOption,
+    ItemOptions,
+    ItemSliding,
+    Label,
+    List,
+    ListHeader,
+    Menu,
+    MenuButton,
+    MenuToggle,
+    NavPop,
+    NavPush,
+    NavSetRoot,
+    Note,
+    Radio,
+    RadioGroup,
+    Range,
+    RangeKnob,
+    Refresher,
+    RefresherContent,
+    Reorder,
+    ReorderGroup,
+    RippleEffect,
+    Route,
+    RouteRedirect,
+    Router,
+    RouterOutlet,
+    Row,
+    Scroll,
+    Searchbar,
+    Segment,
+    SegmentButton,
+    Select,
+    SelectOption,
+    SelectPopover,
+    ShowWhen,
+    SkeletonText,
+    Slide,
+    Slides,
+    Spinner,
+    SplitPane,
+    StatusTap,
+    TabButton,
+    Tabbar,
+    TapClick,
+    Text,
+    Textarea,
+    Thumbnail,
+    Toggle,
+    Toolbar,
+    ToolbarTitle,
+
+    // navigation
+    Nav,
+    Tab,
+    Tabs,
+
+    // router
     IonRouterOutlet,
-    IonTab,
+
-    IonTabs,
+    // inputs
+    BooleanValueAccessor,
     NumericValueAccessor,
     RadioValueAccessor,
     SelectValueAccessor,
     TextValueAccessor,
+
+    // directives
     VirtualScroll,
     VirtualItem,
     VirtualHeader,
     VirtualFooter,
   ],
   exports: [
+    Anchor,
+    App,
+    Avatar,
+    BackButton,
+    Backdrop,
+    Badge,
+    Button,
+    Buttons,
+    Card,
+    CardContent,
+    CardHeader,
+    CardSubtitle,
+    CardTitle,
+    Checkbox,
+    Chip,
+    ChipButton,
+    Col,
+    Content,
+    CordovaPlatform,
+    Datetime,
+    Fab,
+    FabButton,
+    FabList,
+    Footer,
+    Gesture,
+    GestureController,
+    Grid,
+    Header,
+    HideWhen,
+    Icon,
+    InfiniteScroll,
+    InfiniteScrollContent,
+    Input,
+    Item,
+    ItemDivider,
+    ItemGroup,
+    ItemOption,
+    ItemOptions,
+    ItemSliding,
+    Label,
+    List,
+    ListHeader,
+    Menu,
+    MenuButton,
+    MenuToggle,
+    NavPop,
+    NavPush,
+    NavSetRoot,
+    Note,
+    Radio,
+    RadioGroup,
+    Range,
+    RangeKnob,
+    Refresher,
+    RefresherContent,
+    Reorder,
+    ReorderGroup,
+    RippleEffect,
+    Route,
+    RouteRedirect,
+    Router,
+    RouterOutlet,
+    Row,
+    Scroll,
+    Searchbar,
+    Segment,
+    SegmentButton,
+    Select,
+    SelectOption,
+    SelectPopover,
+    ShowWhen,
+    SkeletonText,
+    Slide,
+    Slides,
+    Spinner,
+    SplitPane,
+    StatusTap,
+    TabButton,
+    Tabbar,
+    TapClick,
+    Text,
+    Textarea,
+    Thumbnail,
+    Toggle,
+    Toolbar,
+    ToolbarTitle,
+
     BooleanValueAccessor,
-    IonNav,
+    Nav,
     IonRouterOutlet,
-    IonTab,
+    Tab,
-    IonTabs,
+    Tabs,
     NumericValueAccessor,
     RadioValueAccessor,
     SelectValueAccessor,
@@ -76,15 +346,12 @@ import { ToastController } from './providers/toast-controller';
   ],
   imports: [
     CommonModule,
-  ],
-  schemas: [
-    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
-export class IonicAngularModule {
+export class IonicModule {
   static forRoot(): ModuleWithProviders {
     return {
-      ngModule: IonicAngularModule,
+      ngModule: IonicModule,
       providers: [
         AlertController,
         ActionSheetController,

angular/src/navigation/ion-nav.ts

@@ -1,14 +1,14 @@
 import { ComponentFactoryResolver, Directive, ElementRef, Injector} from '@angular/core';
 
+import { AngularDelegate } from '../providers/angular-delegate';
 import { NavOptions, NavParams, TransitionDoneFn, ViewController } from '@ionic/core';
 import { proxyEl } from '../util/util';
-import { AngularDelegate } from '..';
 
 
 @Directive({
   selector: 'ion-nav',
 })
-export class IonNav {
+export class Nav {
 
   constructor(
     private ref: ElementRef,

angular/src/navigation/ion-tab.ts

@@ -4,7 +4,7 @@ import { Directive, ElementRef, Input, OnInit } from '@angular/core';
 @Directive({
   selector: 'ion-tab'
 })
-export class IonTab implements OnInit {
+export class Tab implements OnInit {
 
   @Input() tabLink: string;
 

angular/src/navigation/ion-tabs.ts

@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 @Directive({
   selector: 'ion-tabs'
 })
-export class IonTabs {
+export class Tabs {
 
   constructor(private router: Router) {}
 

angular/stencil.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+
+// use ionic/core's stencil config
+exports.config = require('../core/stencil.config.js').config;
+
+// update where to find the original ionic/core src
+exports.config.srcDir = '../core/src';
+exports.config.globalScript = '../core/src/global/ionic-global.ts';
+
+// update the output targets
+exports.config.outputTargets = [
+  {
+    type: 'angular',
+    directivesProxyFile: 'src/directives/proxies.ts',
+    empty: false,
+    excludeComponents: [
+      'ion-action-sheet',
+      'ion-action-sheet-controller',
+      'ion-alert',
+      'ion-alert-controller',
+      'ion-animation-controller',
+      'ion-input-shims',
+      'ion-loading',
+      'ion-loading-controller',
+      'ion-platform',
+      'ion-menu-controller',
+      'ion-modal',
+      'ion-modal-controller',
+      'ion-nav',
+      'ion-picker',
+      'ion-picker-column',
+      'ion-picker-controller',
+      'ion-popover',
+      'ion-popover-controller',
+      'ion-tab',
+      'ion-tabs',
+      'ion-toast',
+      'ion-toast-controller',
+      'ion-toast',
+      'ion-virtual-scroll'
+    ]
+  }
+]
+
+exports.devServer = {
+  root: '.',
+  watchGlob: ['dist/*.*', 'dist/ionic/**/**', 'src/**/*.html']
+};