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

Ionic Framework Ionic Angular
#1

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):

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.