diff --git a/angular/src/app-initialize.ts b/angular/src/app-initialize.ts
index 89fa9e4605..2997fc3ecf 100644
--- a/angular/src/app-initialize.ts
+++ b/angular/src/app-initialize.ts
@@ -14,6 +14,7 @@ export function appInitialize(config: Config) {
       const Ionic = win.Ionic = win.Ionic || {};
 
       Ionic.config = config;
+      Ionic.asyncQueue = false;
 
       Ionic.ael = (elm, eventName, cb, opts) => {
         if (elm.__zone_symbol__addEventListener && skipZone(eventName)) {
@@ -45,12 +46,10 @@ export function appInitialize(config: Config) {
   };
 }
 
-const SKIP_ZONE = [
-  'scroll',
-  'touchmove',
-  'mousemove'
+const PASS_ZONE = [
+  'click',
 ];
 
 function skipZone(eventName: string) {
-  return SKIP_ZONE.indexOf(eventName) >= 0;
+  return PASS_ZONE.indexOf(eventName) < 0;
 }
diff --git a/angular/src/directives/navigation/tabs-delegate.ts b/angular/src/directives/navigation/tabs-delegate.ts
index 121241d615..7268d00533 100644
--- a/angular/src/directives/navigation/tabs-delegate.ts
+++ b/angular/src/directives/navigation/tabs-delegate.ts
@@ -17,7 +17,7 @@ export class TabsDelegate {
 
   @HostListener('ionTabButtonClick', ['$event'])
   onTabbarClick(ev: UIEvent) {
-    const tabElm: HTMLIonTabElement = ev.detail as any;
+    const tabElm: HTMLIonTabButtonElement = ev.detail as any;
     if (this.router && tabElm && tabElm.href) {
       this.router.navigateByUrl(tabElm.href);
     }
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index a807cb6c6d..90d1d50ba5 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -2,7 +2,7 @@
 /* auto-generated angular directive proxies */
 
 import { fromEvent } from 'rxjs';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, ViewEncapsulation } from '@angular/core';
 
 type StencilComponents<T extends keyof StencilElementInterfaces> = StencilElementInterfaces[T];
 
@@ -46,7 +46,8 @@ export declare interface BackButton extends StencilComponents<'IonBackButton'> {
 @Component({ selector: 'ion-back-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'defaultHref', 'icon', 'text'] })
 export class BackButton {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'defaultHref', 'icon', 'text']);
   }
@@ -57,7 +58,8 @@ export declare interface Backdrop extends StencilComponents<'IonBackdrop'> {}
 export class Backdrop {
   ionBackdropTap: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['visible', 'tappable', 'stopPropagation']);
     proxyOutputs(this, el, ['ionBackdropTap']);
@@ -68,7 +70,8 @@ export declare interface Badge extends StencilComponents<'IonBadge'> {}
 @Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class Badge {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -80,7 +83,8 @@ export class Button {
   ionFocus: EventEmitter<CustomEvent>;
   ionBlur: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type']);
     proxyOutputs(this, el, ['ionFocus', 'ionBlur']);
@@ -96,7 +100,8 @@ export declare interface Card extends StencilComponents<'IonCard'> {}
 @Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class Card {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -106,7 +111,8 @@ export declare interface CardContent extends StencilComponents<'IonCardContent'>
 @Component({ selector: 'ion-card-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode'] })
 export class CardContent {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode']);
   }
@@ -116,7 +122,8 @@ export declare interface CardHeader extends StencilComponents<'IonCardHeader'> {
 @Component({ selector: 'ion-card-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'translucent'] })
 export class CardHeader {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'translucent']);
   }
@@ -126,7 +133,8 @@ export declare interface CardSubtitle extends StencilComponents<'IonCardSubtitle
 @Component({ selector: 'ion-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class CardSubtitle {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -136,7 +144,8 @@ export declare interface CardTitle extends StencilComponents<'IonCardTitle'> {}
 @Component({ selector: 'ion-card-title', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class CardTitle {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -150,7 +159,8 @@ export class Checkbox {
   ionBlur: EventEmitter<CustomEvent>;
   ionStyle: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'name', 'checked', 'disabled', 'value']);
     proxyOutputs(this, el, ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle']);
@@ -161,7 +171,8 @@ export declare interface Chip extends StencilComponents<'IonChip'> {}
 @Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class Chip {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -171,7 +182,8 @@ export declare interface ChipButton extends StencilComponents<'IonChipButton'> {
 @Component({ selector: 'ion-chip-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'fill', 'href'] })
 export class ChipButton {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'disabled', 'fill', 'href']);
   }
@@ -181,7 +193,8 @@ export declare interface ChipIcon extends StencilComponents<'IonChipIcon'> {}
 @Component({ selector: 'ion-chip-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'fill', 'name', 'src'] })
 export class ChipIcon {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'fill', 'name', 'src']);
   }
@@ -191,7 +204,8 @@ export declare interface Col extends StencilComponents<'IonCol'> {}
 @Component({ selector: 'ion-col', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl'] })
 export class Col {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl']);
   }
@@ -204,7 +218,8 @@ export class Content {
   ionScroll: EventEmitter<CustomEvent>;
   ionScrollEnd: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']);
     proxyInputs(this, el, ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents']);
@@ -219,7 +234,8 @@ export class Datetime {
   ionChange: EventEmitter<CustomEvent>;
   ionStyle: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['open']);
     proxyInputs(this, el, ['mode', 'name', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']);
@@ -231,7 +247,8 @@ export declare interface Fab extends StencilComponents<'IonFab'> {}
 @Component({ selector: 'ion-fab', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['horizontal', 'vertical', 'edge', 'activated'] })
 export class Fab {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['close']);
     proxyInputs(this, el, ['horizontal', 'vertical', 'edge', 'activated']);
@@ -244,7 +261,8 @@ export class FabButton {
   ionFocus: EventEmitter<CustomEvent>;
   ionBlur: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type']);
     proxyOutputs(this, el, ['ionFocus', 'ionBlur']);
@@ -255,7 +273,8 @@ export declare interface FabList extends StencilComponents<'IonFabList'> {}
 @Component({ selector: 'ion-fab-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['activated', 'side'] })
 export class FabList {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['activated', 'side']);
   }
@@ -265,7 +284,8 @@ export declare interface Footer extends StencilComponents<'IonFooter'> {}
 @Component({ selector: 'ion-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
 export class Footer {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode', 'translucent']);
   }
@@ -275,7 +295,8 @@ export declare interface Grid extends StencilComponents<'IonGrid'> {}
 @Component({ selector: 'ion-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['fixed'] })
 export class Grid {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['fixed']);
   }
@@ -285,7 +306,8 @@ export declare interface Header extends StencilComponents<'IonHeader'> {}
 @Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
 export class Header {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode', 'translucent']);
   }
@@ -295,7 +317,8 @@ export declare interface Icon extends StencilComponents<'IonIcon'> {}
 @Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
 export class Icon {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src']);
   }
@@ -306,7 +329,8 @@ export declare interface Img extends StencilComponents<'IonImg'> {}
 export class Img {
   ionImgDidLoad: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['alt', 'src']);
     proxyOutputs(this, el, ['ionImgDidLoad']);
@@ -318,7 +342,8 @@ export declare interface InfiniteScroll extends StencilComponents<'IonInfiniteSc
 export class InfiniteScroll {
   ionInfinite: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['complete']);
     proxyInputs(this, el, ['threshold', 'disabled', 'position']);
@@ -330,7 +355,8 @@ export declare interface InfiniteScrollContent extends StencilComponents<'IonInf
 @Component({ selector: 'ion-infinite-scroll-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['loadingSpinner', 'loadingText'] })
 export class InfiniteScrollContent {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['loadingSpinner', 'loadingText']);
   }
@@ -347,7 +373,8 @@ export class Input {
   ionInputDidLoad: EventEmitter<CustomEvent>;
   ionInputDidUnload: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['setFocus']);
     proxyInputs(this, el, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value']);
@@ -359,7 +386,8 @@ export declare interface Item extends StencilComponents<'IonItem'> {}
 @Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type'] })
 export class Item {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type']);
   }
@@ -369,7 +397,8 @@ export declare interface ItemDivider extends StencilComponents<'IonItemDivider'>
 @Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class ItemDivider {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -384,7 +413,8 @@ export declare interface ItemOption extends StencilComponents<'IonItemOption'> {
 @Component({ selector: 'ion-item-option', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'expandable', 'href'] })
 export class ItemOption {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'disabled', 'expandable', 'href']);
   }
@@ -395,7 +425,8 @@ export declare interface ItemOptions extends StencilComponents<'IonItemOptions'>
 export class ItemOptions {
   ionSwipe: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['fireSwipeEvent']);
     proxyInputs(this, el, ['side']);
@@ -408,7 +439,8 @@ export declare interface ItemSliding extends StencilComponents<'IonItemSliding'>
 export class ItemSliding {
   ionDrag: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']);
     proxyInputs(this, el, ['disabled']);
@@ -421,7 +453,8 @@ export declare interface Label extends StencilComponents<'IonLabel'> {}
 export class Label {
   ionStyle: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'position']);
     proxyOutputs(this, el, ['ionStyle']);
@@ -432,7 +465,8 @@ export declare interface List extends StencilComponents<'IonList'> {}
 @Component({ selector: 'ion-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'lines', 'inset'] })
 export class List {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['closeSlidingItems']);
     proxyInputs(this, el, ['mode', 'lines', 'inset']);
@@ -443,7 +477,8 @@ export declare interface ListHeader extends StencilComponents<'IonListHeader'> {
 @Component({ selector: 'ion-list-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color'] })
 export class ListHeader {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode', 'color']);
   }
@@ -458,7 +493,8 @@ export class Menu {
   ionDidClose: EventEmitter<CustomEvent>;
   ionMenuChange: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']);
     proxyInputs(this, el, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart']);
@@ -470,7 +506,8 @@ export declare interface MenuButton extends StencilComponents<'IonMenuButton'> {
 @Component({ selector: 'ion-menu-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'menu', 'autoHide'] })
 export class MenuButton {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'menu', 'autoHide']);
   }
@@ -480,7 +517,8 @@ export declare interface MenuToggle extends StencilComponents<'IonMenuToggle'> {
 @Component({ selector: 'ion-menu-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['menu', 'autoHide'] })
 export class MenuToggle {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['menu', 'autoHide']);
   }
@@ -493,7 +531,8 @@ export class Nav {
   ionNavWillChange: EventEmitter<CustomEvent>;
   ionNavDidChange: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
     proxyInputs(this, el, ['delegate', 'swipeGesture', 'animated', 'animation', 'rootParams', 'root']);
@@ -510,7 +549,8 @@ export declare interface NavPush extends StencilComponents<'IonNavPush'> {}
 @Component({ selector: 'ion-nav-push', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
 export class NavPush {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['component', 'componentProps']);
   }
@@ -520,7 +560,8 @@ export declare interface NavSetRoot extends StencilComponents<'IonNavSetRoot'> {
 @Component({ selector: 'ion-nav-set-root', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
 export class NavSetRoot {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['component', 'componentProps']);
   }
@@ -530,7 +571,8 @@ export declare interface Note extends StencilComponents<'IonNote'> {}
 @Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class Note {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -546,7 +588,8 @@ export class Radio {
   ionFocus: EventEmitter<CustomEvent>;
   ionBlur: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'name', 'disabled', 'checked', 'value']);
     proxyOutputs(this, el, ['ionRadioDidLoad', 'ionRadioDidUnload', 'ionStyle', 'ionSelect', 'ionFocus', 'ionBlur']);
@@ -558,7 +601,8 @@ export declare interface RadioGroup extends StencilComponents<'IonRadioGroup'> {
 export class RadioGroup {
   ionChange: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['allowEmptySelection', 'name', 'value']);
     proxyOutputs(this, el, ['ionChange']);
@@ -573,7 +617,8 @@ export class Range {
   ionFocus: EventEmitter<CustomEvent>;
   ionBlur: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']);
     proxyOutputs(this, el, ['ionChange', 'ionStyle', 'ionFocus', 'ionBlur']);
@@ -587,7 +632,8 @@ export class Refresher {
   ionPull: EventEmitter<CustomEvent>;
   ionStart: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['complete', 'cancel', 'getProgress']);
     proxyInputs(this, el, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled']);
@@ -599,7 +645,8 @@ export declare interface RefresherContent extends StencilComponents<'IonRefreshe
 @Component({ selector: 'ion-refresher-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
 export class RefresherContent {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']);
   }
@@ -615,7 +662,8 @@ export declare interface ReorderGroup extends StencilComponents<'IonReorderGroup
 export class ReorderGroup {
   ionItemReorder: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['complete']);
     proxyInputs(this, el, ['disabled']);
@@ -627,7 +675,8 @@ export declare interface RippleEffect extends StencilComponents<'IonRippleEffect
 @Component({ selector: 'ion-ripple-effect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>' })
 export class RippleEffect {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['addRipple']);
   }
@@ -648,7 +697,8 @@ export class Searchbar {
   ionBlur: EventEmitter<CustomEvent>;
   ionFocus: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['setFocus']);
     proxyInputs(this, el, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
@@ -661,7 +711,8 @@ export declare interface Segment extends StencilComponents<'IonSegment'> {}
 export class Segment {
   ionChange: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'disabled', 'value']);
     proxyOutputs(this, el, ['ionChange']);
@@ -673,7 +724,8 @@ export declare interface SegmentButton extends StencilComponents<'IonSegmentButt
 export class SegmentButton {
   ionSelect: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'value']);
     proxyOutputs(this, el, ['ionSelect']);
@@ -689,7 +741,8 @@ export class Select {
   ionBlur: EventEmitter<CustomEvent>;
   ionStyle: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['open']);
     proxyInputs(this, el, ['mode', 'disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'value']);
@@ -703,7 +756,8 @@ export class SelectOption {
   ionSelectOptionDidLoad: EventEmitter<CustomEvent>;
   ionSelectOptionDidUnload: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['disabled', 'selected', 'value']);
     proxyOutputs(this, el, ['ionSelectOptionDidLoad', 'ionSelectOptionDidUnload']);
@@ -714,7 +768,8 @@ export declare interface SelectPopover extends StencilComponents<'IonSelectPopov
 @Component({ selector: 'ion-select-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['header', 'subHeader', 'message', 'options'] })
 export class SelectPopover {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['header', 'subHeader', 'message', 'options']);
   }
@@ -724,7 +779,8 @@ export declare interface SkeletonText extends StencilComponents<'IonSkeletonText
 @Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['width'] })
 export class SkeletonText {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['width']);
   }
@@ -735,7 +791,8 @@ export declare interface Slide extends StencilComponents<'IonSlide'> {}
 export class Slide {
   ionSlideChanged: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyOutputs(this, el, ['ionSlideChanged']);
   }
@@ -761,7 +818,8 @@ export class Slides {
   ionSlideTouchStart: EventEmitter<CustomEvent>;
   ionSlideTouchEnd: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['update', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']);
     proxyInputs(this, el, ['mode', 'options', 'pager', 'scrollbar']);
@@ -773,7 +831,8 @@ export declare interface Spinner extends StencilComponents<'IonSpinner'> {}
 @Component({ selector: 'ion-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'duration', 'name', 'paused'] })
 export class Spinner {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'duration', 'name', 'paused']);
   }
@@ -785,7 +844,8 @@ export class SplitPane {
   ionChange: EventEmitter<CustomEvent>;
   ionSplitPaneVisible: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['disabled', 'when']);
     proxyOutputs(this, el, ['ionChange', 'ionSplitPaneVisible']);
@@ -796,7 +856,8 @@ export declare interface Tab extends StencilComponents<'IonTab'> {}
 @Component({ selector: 'ion-tab', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['active', 'delegate', 'tab', 'component'] })
 export class Tab {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['setActive']);
     proxyInputs(this, el, ['active', 'delegate', 'tab', 'component']);
@@ -808,7 +869,8 @@ export declare interface TabBar extends StencilComponents<'IonTabBar'> {}
 export class TabBar {
   ionTabBarChanged: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode', 'color', 'layout', 'placement', 'selectedTab', 'translucent']);
     proxyOutputs(this, el, ['ionTabBarChanged']);
@@ -820,7 +882,8 @@ export declare interface TabButton extends StencilComponents<'IonTabButton'> {}
 export class TabButton {
   ionTabButtonClick: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode', 'color', 'layout', 'href', 'tab', 'disabled']);
     proxyOutputs(this, el, ['ionTabButtonClick']);
@@ -835,7 +898,8 @@ export class Tabs {
   ionNavWillChange: EventEmitter<CustomEvent>;
   ionNavDidChange: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['select', 'setRouteId', 'getRouteId', 'getTab', 'getSelected']);
     proxyInputs(this, el, ['name']);
@@ -847,7 +911,8 @@ export declare interface Text extends StencilComponents<'IonText'> {}
 @Component({ selector: 'ion-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class Text {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -862,7 +927,8 @@ export class Textarea {
   ionBlur: EventEmitter<CustomEvent>;
   ionFocus: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyMethods(this, el, ['setFocus']);
     proxyInputs(this, el, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
@@ -883,7 +949,8 @@ export class Toggle {
   ionBlur: EventEmitter<CustomEvent>;
   ionStyle: EventEmitter<CustomEvent>;
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['mode', 'color', 'name', 'checked', 'disabled', 'value']);
     proxyOutputs(this, el, ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle']);
@@ -894,7 +961,8 @@ export declare interface Toolbar extends StencilComponents<'IonToolbar'> {}
 @Component({ selector: 'ion-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class Toolbar {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color', 'mode']);
   }
@@ -904,7 +972,8 @@ export declare interface ToolbarTitle extends StencilComponents<'IonTitle'> {}
 @Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color'] })
 export class ToolbarTitle {
 
-  constructor(r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
     const el = r.nativeElement;
     proxyInputs(this, el, ['color']);
   }
diff --git a/angular/src/types/interfaces.ts b/angular/src/types/interfaces.ts
index 59dbd04241..8591c9727d 100644
--- a/angular/src/types/interfaces.ts
+++ b/angular/src/types/interfaces.ts
@@ -4,6 +4,7 @@ export interface IonicGlobal {
   ael?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
   raf?: (ts: number) => void;
   rel?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
+  asyncQueue?: boolean;
 }
 
 export interface IonicWindow extends Window {
diff --git a/core/package.json b/core/package.json
index 43995f7667..f9b0a6f5d0 100644
--- a/core/package.json
+++ b/core/package.json
@@ -30,7 +30,7 @@
     "ionicons": "4.4.6"
   },
   "devDependencies": {
-    "@stencil/core": "0.15.1",
+    "@stencil/core": "0.15.2-0",
     "@stencil/sass": "0.1.1",
     "@stencil/utils": "latest",
     "@types/jest": "^23.3.1",
diff --git a/core/src/components/tab-bar/test/scenarios/camera.svg b/core/src/components/tab-bar/test/scenarios/camera.svg
new file mode 100644
index 0000000000..0e7f06037a
--- /dev/null
+++ b/core/src/components/tab-bar/test/scenarios/camera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
\ No newline at end of file
diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html
index e0bbd1a331..5514f9e45f 100644
--- a/core/src/components/tab-bar/test/scenarios/index.html
+++ b/core/src/components/tab-bar/test/scenarios/index.html
@@ -8,6 +8,24 @@
   <script src="../../../../../dist/ionic.js"></script>
   <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
   <link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
+
+  <style>
+  .custom-tabbar {
+    overflow: visible;
+    contain: none;
+  }
+  .main-tab {
+    --padding-top: 18px;
+
+    border-radius: 50%;
+    max-width: 80px;
+    height: 80px;
+    background: #848484;
+    color: white;
+    font-size: 16px;
+  }
+
+  </style>
 </head>
 
 <body>
@@ -187,6 +205,24 @@
       </ion-tab-button>
     </ion-tab-bar>
 
+    <!-- Custom TabBar -->
+    <ion-tab-bar selected-tab="1" class="custom-tabbar">
+      <ion-tab-button tab='1'>
+        <ion-label>Location</ion-label>
+        <ion-icon name="navigate"></ion-icon>
+      </ion-tab-button>
+
+      <ion-tab-button tab='2' class="main-tab">
+        <ion-icon src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
+      </ion-tab-button>
+
+      <ion-tab-button tab='3'>
+        <ion-label>Radio</ion-label>
+        <ion-icon name="musical-notes"></ion-icon>
+      </ion-tab-button>
+
+    </ion-tab-bar>
+
   </ion-app>
 
 </body>
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 3c5201e68d..4139e90fca 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -65,6 +65,7 @@ export const config: Config = {
     },
     {
       type: 'angular',
+      useDirectives: false,
       componentCorePackage: '@ionic/core',
       directivesProxyFile: '../angular/src/directives/proxies.ts',
       directivesArrayFile: '../angular/src/directives/proxies-list.txt',