There seems to be a perplexing issue with the ion-split-pane element that I just can't wrap my head around.
Once I remove the split-pane element, the router-outlet functions perfectly fine. The navigation is displayed after a successful login. The only drawback is that my web app has a mobile feel with a click-to-open menu on desktop screens as well. I could resort to CSS and bootstrap for a solution, but the fact that I can't resolve this nags at me. HELP!
The problem lies in:
A. The split pane not adapting based on screen size
B. Some interference with loading pages into the router-outlet
app.component.html:
<ion-app>
<ion-split-pane contentId="main-content" [when]="true">
<ion-menu content="content" *ngIf="this.authInfo | async" contentId="main-content" type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
<ion-menu-button slot="end">
<ion-icon name="close-circle-outline"></ion-icon>
</ion-menu-button>
</ion-toolbar>
</ion-header>
<ion-content>
<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-label>{{appPages[k].title}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-header *ngIf="this.authInfo | async">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>{{section}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-router-outlet id="main-content" #content main></ion-router-outlet>
</ion-split-pane>
</ion-app>
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './guards/auth-guard.service';
import { LandingPage } from './landing/landing.page';
// Other routes omitted for brevity
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
Angular 9/Ionic 5
I'm not sure if you need to see additional files, but since I can't pinpoint the issue, feel free to reach out and I'll provide any related files.