Need help with Split Pane app

Ionic Framework Ionic Angular
1

I’m working on a split-pane app and its behavior is not what I expected. On Chrome, the side bar and content area work as expected, when I select an item in the navigation pane, the appropriate content shows up in the main-content router outlet.

When I run the app on any other browser (Edge, Opera, Brave, Firefox, Vivaldi on Windows, Safari and Chrome on ipadOS) only the router outlet appears.

The main page’s content loads through a connection to a backend server, but on all those platforms but Chrome, that code never seems to run.

The app has a login page (Firebase Auth) so I have logic in my app-component file to display different content based on whether the user is logged in or not:

<ion-app>
  <div *ngIf="isLoggedIn">
    <!-- Only show this div when the user is logged-in -->
    <ion-split-pane contentId="main-content">
      <ion-menu contentId="main-content">
        <ion-toolbar>
          <ion-title>MyApp</ion-title>
          <ion-buttons slot="end">
            <ion-button ion-button icon-only (click)="showSettings()">
              <ion-icon name="settings-outline"></ion-icon>
            </ion-button>
            <ion-button ion-button icon-only (click)="doLogout()">
              <ion-icon name="log-out-outline"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
        <ion-content>
          <ion-note>{{ userEmail }}</ion-note>
          <ion-list id="inbox-list">
            <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
              <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none"
                detail="false" [class.selected]="selectedIndex == i">
                <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
                <ion-label>{{ p.title }}</ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>          
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="main-content">
      </ion-router-outlet>
    </ion-split-pane>
  </div>
  <div *ngIf="!isLoggedIn">
    <!-- Only show this div when the user is not logged-in (login page) -->
    <ion-router-outlet id="main-content">
    </ion-router-outlet>
  </div>
</ion-app>

Does anyone have some guidance on what’s going on here? I made a new project and compared the project files between the two and I’m not seeing a difference (beyond what I show above).

2

I figured it out, I had faulty logic in my auth service. I used someone’s example code to implement Firebase Authentication and it had a logic error. I was able to figure it out when I realized that the problem happened when I was logged in using specific accounts. Weird.

How do I mark this as closed???