Ion-nav not loading rootPage

Ionic Framework Ionic Angular
1

I have an ion-menu with an ion-nav component were I specified the [root] attribute.

<ion-header>

  <ion-toolbar>

    <ion-buttons slot="end">

      <ion-menu-button menu="first" auto-hide="false"></ion-menu-button>

    </ion-buttons>

  </ion-toolbar>

</ion-header>

<ion-menu side="start" menuId="first" type="overlay">

  <ion-nav  [root]="rootPage"></ion-nav>

</ion-menu>

<ion-content>

  <ion-button [routerLink]="['/user/login']">Login</ion-button>

  <ion-button [routerLink]="['/user/register']">Register</ion-button>

  <ion-button [routerLink]="['/user/verify']">Verify</ion-button>

  <ion-button (click)="checkJWT()">CheckJWT</ion-button>

  <router-outlet></router-outlet>

</ion-content>

I initialized the rootPage with the component

export class UserPageComponent implements OnInit {

  rootPage = MenuListComponent;

  constructor( private userStoreService: UserStoreService

  ) { }

And the root component looks like this:

<ion-buttons slot=start>

  <ion-back-button></ion-back-button>

</ion-buttons>

<ion-title>menuList</ion-title>

<!-- <ion-nav-link router-direction="forward">

</ion-nav-link>

<ion-nav-link router-direction="root">

</ion-nav-link> -->

But when I serve my ionic app I get an error in the chrome console where it says: “Menu must have a content element.”

version:
“@ionic-native/core”: “^5.0.7”,
“@capacitor/core”: “^2.3.0”,
“@angular/common”: “~9.1.6”,

2

I forgot the router-outlet…

<ion-menu side="start" menuId="first" contentId="content1" type="overlay">

  <ion-nav [root]='rootPage'></ion-nav>

  <ion-router-outlet id="content1" main></ion-router-outlet>

</ion-menu>