So I am using Angular Universal which makes the system do the server-side rendering. Then a problem arises. The <ion-menu>
is not visible. There is an error:
Menu: must have a “content” element to listen for drag events on.
It works fine on the client-side rendering. How do I fix this? The content itself is rendered correctly, but not the menu.
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-header>
<ion-toolbar>
<ion-menu-toggle auto-hide="false">
<ion-title>Menu</ion-title>
</ion-menu-toggle>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-menu-toggle auto-hide="false">
<div>
<div>
<ion-item
button
routerLink="/users"
routerLinkActive="nav-active"
class="menu-item"
lines="none"
>
<ion-icon name="person" color="secondary"></ion-icon>
<ion-label class="menu-name" color="secondary">Users</ion-label>
</ion-item>
</div>
....
</div>
</ion-menu-toggle>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
This is what it looks like from the inspection (server-side render):
The contentId
and the id of the content are matched, which is “main-content”. It should not have any problem. It works fine on client-side rendering.