bug: Nested ion-router-outlet renders as page instead of sub-component

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Currently using a nested ion-router-outlet in one of my components:

<h2 id="dashboard-header">Dashboard</h2>
<ion-router-outlet></ion-router-outlet>

With the following router configuration:

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './login/login.module#LoginModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterModule' },
  { 
    path: 'dashboard', 
    component: Dashboard,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      { path: 'submit', loadChildren: './submission/submission.module#SubmissionModule' }
    ]
  }
];

When hitting the /dashboard/submit endpoint the submission component takes the whole screen, appearing over the header. Looking into the styling, I found the following styles for ion-router-outlet:

:host {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
contain: layout size style;
overflow: hidden;
z-index: 0;
}

and the submission component:

.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: flex;
position: absolute;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
contain: layout size style;
overflow: hidden;
z-index: 0;
}

The submission component does not have the IonicPage annotation. Why is this styling getting applied?

Expected behavior:

The ion-router-outlet and the submission component should not have absolute positioning.

Steps to reproduce:

-Pull the following repo -Checkout the ion-router-issue tag: git checkout ion-router-issue -cd frontend -ionic serve -Go to /dashboard/submit

The Dashboard header should appear.

Ionic info:

Ionic: Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 5.0.0 @angular-devkit/build-angular : 0.803.25 @angular-devkit/schematics : 8.3.25 @angular/cli : 8.3.25 @ionic/angular-toolkit : 2.1.2 Capacitor: Capacitor CLI : 1.5.0 @capacitor/core : 1.5.0 Utility: cordova-res : 0.9.0 native-run : 0.3.0 System: NodeJS : v13.5.0 (/usr/local/Cellar/node/13.5.0/bin/node) npm : 6.13.4 OS : macOS Catalina

[liamdebeasi]

@guzmanoj Thanks! I am going to close this as a duplicate of https://github.com/ionic-team/ionic/issues/18197. (It is a different scenario, but the underlying issue appears to be the same).

[bcaton85]

Hi Liam. That repo has been progressed past that commit since i posted this. I’ve added a ion-router-issue tag to the commit where i was seeing the issue.