When add <ion-router-outlet> to my page, all buttons stop working

Ionic Framework ionic-v3
1

I decided to put a side menu in my page, following the documentation I should insert the <ion-router-outlet> tag in this page or else the menu won’t activate. The problem is, when I insert this tag all my buttons don’t click anymore. Neither the click function nor the animation work.

I was originally using <ion-menu-button tag to toggle the menu, so I tried to toggle by the function: menuController.toggle(), but this don’t work and even so I need the <ion-router-outlet> to activate the menu.

Without the tag I receive an error:

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

My code:

<ion-content>
	<ion-menu side="end">
		<ion-header>
			<ion-toolbar color="primary">
				<ion-title>Menu</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content>
			<ion-list>
				<ion-item *ngIf="userAccess == 'all'" href="randomHrefLink" target="_blank">
					randomMenuItem
				</ion-item>
			</ion-list>
		</ion-content>
	</ion-menu>

	<ion-list>	

		<ion-item *ngIf="userAccess == 'all' || userAccess == 'randomItem'">
			<ion-thumbnail slot="start">
				<img src="assets/thumbs/randomThumbnail.jpg">
			</ion-thumbnail>
			<ion-label>
				<h2>randomItem</h2>
				<p>randomDate</p>
			</ion-label>	    
			<ion-button clear slot="end" (click)="randomFunction();">buttonWithProblem</ion-button>
		</ion-item>
	
		...
	
		<ion-router-outlet main></ion-router-outlet>
	
	</ion-list>

</ion-content>

Additional information:

  • There is another page with the <ion-router-outlet main> and other menus, tried to remove them, but everything remains the same. I this same page I tried to replicate the problem, I added a button with some random function just to see if this problem was in one page alone or in all of them. Sadly this same bug happened in that page too;
  • Some click functions work inside the menu, only the outside buttons don’t;
  • Tried to add a menuId attribute to the <ion-menu> tag, but nothing changed too;
  • Tried to implement the (click) function in the tag, didn’t work too;
  • Based on this answer, I tried to add a contentId attribute in the <ion-menu> tag and refer this to the <ion-router-outlet>, nothing changed;
  • With this other answer I can see the previous error reason, but could not identify the why the buttons/functions are not working.

I created a stackblitz to reproduce this problem more easily, but to my frustration it worked fine there. (The menu icon is not showing in the top right corner, but it’s working. I got an ionic 4 template online, so ignore the other pages). So as I see that this problem is happening only in my project, if anyone have an ideia why please comment.

2

I couldn’t solve this problem, but I achieved the same goal using Ionic’s Action Sheet.