@ionic/angular 7.6.2-dev.11704729332.13b412c8 → 7.6.2-dev.11704834200.17f5bc99

package/esm2020/standalone/navigation/tabs.mjs

@@ -18,7 +18,7 @@ export class IonTabs extends IonTabsBase {
       ></ion-router-outlet>
     </div>
     <ng-content></ng-content>
-  `, isInline: true, styles: [":host{display:flex;position:absolute;inset:0;flex-direction:column;width:100%;height:100%;contain:layout size style}.tabs-inner{position:relative;flex:1;contain:layout size style}\n"], dependencies: [{ kind: "directive", type: IonRouterOutlet, selector: "ion-router-outlet" }] });
+  `, isInline: true, styles: [":host{display:flex;position:absolute;inset:0;flex-direction:column;width:100%;height:100%;contain:layout size style}.tabs-inner{position:relative;flex:1;contain:layout size style}\n"], dependencies: [{ kind: "component", type: IonRouterOutlet, selector: "ion-router-outlet" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IonTabs, decorators: [{
             type: Component,
             args: [{ selector: 'ion-tabs', template: `

package/fesm2015/ionic-angular-common.mjs

@@ -1356,9 +1356,6 @@ class StackController {
         if (enteringEl && enteringEl !== leavingEl) {
             enteringEl.classList.add('ion-page');
             enteringEl.classList.add('ion-page-invisible');
-            if (enteringEl.parentElement !== containerEl) {
-                containerEl.appendChild(enteringEl);
-            }
             if (containerEl.commit) {
                 return containerEl.commit(enteringEl, leavingEl, {
                     duration: direction === undefined ? 0 : undefined,
@@ -1424,7 +1421,8 @@ const cleanup = (activeRoute, views, viewsSnapshot, location, zone) => {
 // TODO(FW-2827): types
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class IonRouterOutlet {
-    constructor(name, tabs, commonLocation, elementRef, router, zone, activatedRoute, parentOutlet) {
+    constructor(name, tabs, commonLocation, elementRef, router, zone, activatedRoute, outletContent, parentOutlet) {
+        this.outletContent = outletContent;
         this.parentOutlet = parentOutlet;
         this.activatedView = null;
         // Maintain map of activated route proxies for each component instance
@@ -1613,8 +1611,16 @@ class IonRouterOutlet {
             const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const component = (_a = snapshot.routeConfig.component) !== null && _a !== void 0 ? _a : snapshot.component;
-            cmpRef = this.activated = this.location.createComponent(component, {
-                index: this.location.length,
+            /**
+             * View components need to be added as a child of ion-router-outlet
+             * for page transitions and swipe to go back.
+             * However, createComponent mounts components as siblings of the
+             * ViewContainerRef. As a result, outletContent must reference
+             * an ng-container inside of ion-router-outlet and not
+             * ion-router-outlet itself.
+             */
+            cmpRef = this.activated = this.outletContent.createComponent(component, {
+                index: this.outletContent.length,
                 injector,
                 environmentInjector: environmentInjector !== null && environmentInjector !== void 0 ? environmentInjector : this.environmentInjector,
             });
@@ -1733,7 +1739,7 @@ class IonRouterOutlet {
         this.currentActivatedRoute$.next({ component, activatedRoute });
     }
 }
-/** @nocollapse */ IonRouterOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IonRouterOutlet, deps: [{ token: 'name', attribute: true }, { token: 'tabs', attribute: true, optional: true }, { token: i1.Location }, { token: i0.ElementRef }, { token: i3.Router }, { token: i0.NgZone }, { token: i3.ActivatedRoute }, { token: IonRouterOutlet, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ IonRouterOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IonRouterOutlet, deps: [{ token: 'name', attribute: true }, { token: 'tabs', attribute: true, optional: true }, { token: i1.Location }, { token: i0.ElementRef }, { token: i3.Router }, { token: i0.NgZone }, { token: i3.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: IonRouterOutlet, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 /** @nocollapse */ IonRouterOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: IonRouterOutlet, selector: "ion-router-outlet", inputs: { animated: "animated", animation: "animation", mode: "mode", swipeGesture: "swipeGesture", name: "name" }, outputs: { stackWillChange: "stackWillChange", stackDidChange: "stackDidChange", activateEvents: "activate", deactivateEvents: "deactivate" }, exportAs: ["outlet"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IonRouterOutlet, decorators: [{
             type: Directive,
@@ -1752,7 +1758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     }, {
                         type: Attribute,
                         args: ['tabs']
-                    }] }, { type: i1.Location }, { type: i0.ElementRef }, { type: i3.Router }, { type: i0.NgZone }, { type: i3.ActivatedRoute }, { type: IonRouterOutlet, decorators: [{
+                    }] }, { type: i1.Location }, { type: i0.ElementRef }, { type: i3.Router }, { type: i0.NgZone }, { type: i3.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: IonRouterOutlet, decorators: [{
                         type: SkipSelf
                     }, {
                         type: Optional