ionic framework - My side menu overrides my home page's html content under Ionic4 using Angular

Question

I use Ionic4/Angular, I just created a project using the following tutorial : https://www.youtube.com/watch?v=5OgqjVbsNuE I did not touched anything such as routing etc...

Here is my app.component.html :

<ion-app>
  <ion-split-pane>
      <ion-menu type = "overlay">
          <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 appMenu">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-label>{{p.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Producing the following result :

Menu displayed & fully working, home page not showing

When I change my code to this (for test purposes) :

    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
  <ion-router-outlet></ion-router-outlet>

home page & menu icon finally displayed but no menu showing

From that code if I remove (for test purpose again, i know this is wrong) <ion-router-outlet main></ion-router-outlet> :

    <ion-app>
  <ion-split-pane>
      <ion-menu type = "overlay">
          <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 appMenu">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-label>{{p.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
  </ion-split-pane>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

Producing the following result : home page only

What I want is image 1 and 2 : Menu displaying & home page with icon.

How can I do that ? Everything seems to lie in this code but I'm a complete beginner regarding Ionic4/Angular.

I don't think this is needed but here is the html code of my home page :

<ion-header>
  <ion-toolbar>
    <ion-buttons slot = "start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Ionic Blank</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>If you get lost, the <a target = "_blank" rel = "noopener" href = "https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>

app.component.ts :

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  public appMenu = [
    {title : 'Accueil', url: '/home', icon: 'home'},
    {title : 'Profile', url: '/profil', icon: 'person'},
    {title : 'Lire', url: '/read', icon: 'search'},
    {title : 'Publier', url: '/publish', icon: 'create'},
    {title : 'Ma bibliothèque', url: '/mylibrary', icon: 'book'},
    {title : 'Mes oeuvres', url: '/myworks', icon: 'book'},
    {title : 'Mon abonnement', url: '/mysubscriptions', icon: 'cash'}
  ];
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

question from:https://stackoverflow.com/questions/65905090/my-side-menu-overrides-my-home-pages-html-content-under-ionic4-using-angular

Answer 1

Your implementation is incorrect. Consider the following taken from Ionic Split Pane Docuementation

 <ion-split-pane contentId="main">
  <!--  the side menu  -->
  <ion-menu contentId="main">
    <ion-header>
      <ion-toolbar>
       <ion-title>Menu</ion-title>
      </ion-toolbar>
   </ion-header>
  </ion-menu>

 <!-- the main content -->
 <ion-router-outlet id="main"></ion-router-outlet>

Note that you are missing contentId from ion-split-pane as shown above. And then related... you are also missing the id from ion-router-outlet. Third, you should also add contentId to ion-menu as shown above.