Ionic Angular Universal: Menu: must have a "content" element to listen for drag events on

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-menu-toggle auto-hide="false">
    <ion-content class="ion-padding">
      <ion-menu-toggle auto-hide="false">
              <ion-icon name="person" color="secondary"></ion-icon>
              <ion-label class="menu-name" color="secondary">Users</ion-label>
  <ion-router-outlet id="main-content"></ion-router-outlet>

This is what it looks like from the inspection (server-side render):

enter image description here

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.