Menu: must have a “content” element to listen for drag events on

I created a menu component which has the menu-button and the ion-menu inside because i want to use this component on multiple pages. To use this component on different pages, i created a module with the menu component inside which than gets imported on every page that should have the menu.
When accessing the page i get the error

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

app.component.html

<ion-app>
    <ion-router-outlet id="main-menu"></ion-router-outlet>
</ion-app>

menu.component.html

<div id="menu-button" (click)="this.toggleMenu()">
	<span></span>
	<span></span>
	<span></span>
</div>
<ion-menu side="start" contentId="main-menu" menuId="main-menu">
	<ion-content>
		<ion-menu-toggle auto-hide="false">
			<ion-list lines="none">
				<ion-item [routerLink]="'/list-view'">
					<ion-icon name="list-outline" slot="start"></ion-icon>
					{{ 'PAGES.LISTVIEW.LISTVIEW' | translate }}
				</ion-item>
				<ion-item [routerLink]="'/settings'">
					<ion-icon name="list-outline" slot="start"></ion-icon>
					{{ 'PAGES.SETTINGS.PKEY' | translate }}
				</ion-item>
				<ion-item (click)="logout()">
					<ion-icon name="log-out-outline" slot="start"></ion-icon>
					{{ 'PAGES.LOGIN.LOGOUT' | translate }}
				</ion-item>
			</ion-list>
		</ion-menu-toggle>
	</ion-content>
</ion-menu>

exit code 1.
do you know about

Please create your own post instead of commenting an unrelated question onto my post