Transitions/Animations/Page layout do not function when using named ion-router-outlets

Bug Report

Ionic version: [x] 4.x

Current behavior: Using a named ion-router-outlet causes animation and layout to break. Named outlets appear to be essentially very difficult to use at this point for any built-in functionality. Header and footer collapse together at the bottom of the outlet viewport, and content is not displayed. This layout bug be fixed with CSS, but animations do not function at all.

Expected behavior: Proper display of page content in the outlet. Enter/exit animations function properly.

Steps to reproduce: Just use any ionic demo app and change the router outlet to have a name="something" property…

Related code: This code taken directly from a fresh ionic app and modified to add name to router outlet

app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">


            <ion-item [routerDirection]="'root'" [routerLink]="p.url"> <!-- Removed array notation from p.url here -->


              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>


    <ion-router-outlet main name="foo"></ion-router-outlet> <!-- Added name="foo" -->


  </ion-split-pane>
</ion-app>

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: '/(foo:home)',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule',
    outlet: 'foo'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule',
    outlet: 'foo'
  }
];

app.component.ts

  public appPages = [
    {
      title: 'Home',
      url: ['/', { outlets: { foo: ['home'] } }],
      icon: 'home'
    },
    {
      title: 'List',
      url: ['/', { outlets: { foo: ['list'] } }],
      icon: 'list'
    }
  ];

Other information:

Fix for layout issue with CSS:

global.scss

// http://ionicframework.com/docs/theming/
@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';

@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';

ion-router-outlet {
  router-outlet {
    display: none;
  }

  ng-component {

    router-outlet {
      display: none;
    }

    &>* {
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      contain: layout size style;
      overflow: hidden;
    }
  }
}

Ionic info:

$ ionic info

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.13.0
   @angular-devkit/schematics    : 7.3.0
   @angular/cli                  : 7.3.0
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v10.6.0 (/usr/local/Cellar/node/10.6.0/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[amanitequeen]

Same problem. I’ve tried to remove the name outlet without changing anything else and the content shows correctly. But I nned the named outlets on my application

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!