Ionic4 component - Menu: must have a 'content' element to listen for drag events on

Theion-menu needs a contentId and the ion-router-outlet needs an id, so the menu contentId must be the ion-router-outlet id:

<ion-menu side="start" contentId="menuContent">   <ion-header>        <ion-toolbar color="primary">            <ion-title>Start Menu</ion-title>        </ion-toolbar>    </ion-header>    <ion-content>        <ion-list>            <ion-item>Menu Item</ion-item>            <ion-item>Menu Item</ion-item>            <ion-item>Menu Item</ion-item>            <ion-item>Menu Item</ion-item>            <ion-item>Menu Item</ion-item>        </ion-list>    </ion-content></ion-menu><ion-router-outlet id="menuContent"></ion-router-outlet>

if you want the code: use content-id="content" and on ion-content id="content"

<ion-menu class="menu_main" side="start" content-id="content">        <ion-header>            <ion-toolbar color="secondary">                <ion-title>Left Menu</ion-title>            </ion-toolbar>        </ion-header>        <ion-content padding>            Hello World!        </ion-content>    </ion-menu>    <ion-menu-controller></ion-menu-controller>    <ion-content id="content">     <ion-card style="display:inline-block;width:300px">        <ion-card-header>            <ion-card-title>Hello World</ion-card-title>        </ion-card-header>        <div style="padding:10px 10px;text-align:right;">            <ion-button color="primary" class="button_details">Details</ion-button>        </div>    </ion-card></ion-content>

To those in the future you're probably running into the issue where you have a router outlet inside your ion-split-pane right?

Do this:

<ion-split-pane contentId="my-content">     <ion-menu contentId="my-content"> ... </ion-menu>     <ion-router-outlet id="my-content"></ion-router-outlet></ion-split-pane>

Note that the [main] attribute that was on your ion-router-outlet is now gone

Source: https://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915