Angular9/Ionic 5 Ion-Split-pane issues

For Some reason beyond my comprehension I am having issues with the ion-split-pane element.

If I remove the split-pane element the router-outlet works just fine. and My nav is shown after login is successful. Only problem is I have a mobile feel web app :/ with a click to open menu on desktop screens as well. I know I could go CSS and bootstrap to come up with something. But it irks me that I cant figure this out. HELP!

It is:
A. Not doing the split pane thing based on the screen size
B. Somehow it interferes with pages being loaded into the router-outlet


  <ion-split-pane contentId="main-content" [when]="true">
    <ion-menu content="content" *ngIf="this.authInfo | async" contentId="main-content" type="overlay">
          <ion-menu-button slot="end">
            <ion-icon name="close-circle-outline"></ion-icon>
        <ion-list id="profile-section">
          <ion-menu-toggle auto-hide="false" *ngFor="let k of orderedKeys();">
            <ion-item (click)="handleClick(k)"  detail="false"  lines="none" class="active" [class.selected]="testSelection(appPages[k].name)">
              <ion-icon slot="start" [name]="appPages[k].icon + '-outline'"></ion-icon>
    <ion-header *ngIf="this.authInfo | async">
        <ion-buttons slot="start">
    <ion-router-outlet id="main-content" #content main></ion-router-outlet>

Angular 9/Ionic 5

I don’t see why you would need to see other files, but then again I cant figure out what’s wrong. So drop a line and I can share related files.

Source: Angular Questions