[4.0.0-rc.2] usage of router-outlet instead of ion-router-outlet breaks the layout

Bug Report

Ionic version: 4.0.0-rc.2

Current behavior: When you create a new project “sidemenu” with the ionic-cli and replace ion-router-outlet with router-outlet, the layout breaks

Expected behavior: since the description of the ion-router-outlet component states to behave exactly like the router-outlet except for the differences for a “stacked-navigation” and for “animations”, the expected behavior would be that using router-outlet does not break the layout

Steps to reproduce:

1. Create a “sidemenu” app with ionic cli 4.7.1
2. replace ion-router-outlet with router-outlet

Related code: 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]">
              <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>
    <router-outlet main><router-outlet> <!-- this line breaks the layout -->
  </ion-split-pane>
</ion-app>

[paulstelzer]

Thanks for the issue! You have to add the css by yourself. I think the problem will be that router-outlet will not generate a tag that you can style.

Another option could be still use ion-router-outlet and removing

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

from app.module.ts

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.