Popover opens on wrong Page

Question

I'm creating a popover on one Page when clicking on a label. It should open there and it worked while using tabs as navigation. Now, I changed the tab navigation from the tabmodule to the app-routing.module, because I want the tabs to show on every page. Now, when I'm clicking on the label ("bewertung") to open the popover ("rateus"), it doesn't show at the 5th tab ("more"), where it should open, but, when I navigate to the 1st tab ("home"), it is opened there and I can't interact with it.

more.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController, NavController, PopoverController } from '@ionic/angular'
import { RateusPage } from 'src/app/popover/rateus/rateus.page';

@Component({
  selector: 'app-more',
  templateUrl: './more.page.html',
  styleUrls: ['./more.page.scss'],
})
export class MorePage implements OnInit {

  constructor(
    private popoverController: PopoverController,
    private modalController: ModalController
  ) { }

  ngOnInit() {
  }

  async presentPopover() {
    console.log('I got clicked')
    const popover = await this.popoverController.create({
      component: RateusPage,
    });
    popover.present();
  }
}

rateus.page.html

<ion-item>
  <ion-label>
    Bewertung
  </ion-label>
</ion-item>
<ion-content padding>
  <ion-button expand="full" (click)=rateusDismiss()>Close</ion-button>
</ion-content>

rateus.page.ts

import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';

@Component({
  selector: 'app-rateus',
  templateUrl: './rateus.page.html',
  styleUrls: ['./rateus.page.scss'],
})
export class RateusPage implements OnInit {

  constructor(private popoverController: PopoverController) { }

  ngOnInit() {
  }

  rateusDismiss(){
    console.log("dismiss")
    this.popoverController.dismiss();
  }
}

Answer 1

EDIT: I finally found the problem, my app.component.html was looking like this:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="shop">
      <ion-icon name="cart"></ion-icon>
      <ion-label>Shop</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="inbox" (click)="loginrequired()">
      <ion-icon name="mail"></ion-icon>
      <ion-label>Postfach</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile" (click)="loginrequired()">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="more">
      <ion-icon name="ellipsis-horizontal"></ion-icon>
      <ion-label>Mehr</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

But it has to look like this:

<ion-app>

  <ion-router-outlet></ion-router-outlet>

  <ion-tabs>

    <ion-tab-bar slot="bottom">

      

      <ion-tab-button tab="home">

        <ion-icon name="home"></ion-icon>

        <ion-label>Home</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="shop">

        <ion-icon name="cart"></ion-icon>

        <ion-label>Shop</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="inbox" (click)="loginrequired()">

        <ion-icon name="mail"></ion-icon>

        <ion-label>Postfach</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="profile" (click)="loginrequired()">

        <ion-icon name="person"></ion-icon>

        <ion-label>Profile</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="more">

        <ion-icon name="ellipsis-horizontal"></ion-icon>

        <ion-label>Mehr</ion-label>

      </ion-tab-button>

    </ion-tab-bar>

  </ion-tabs>

</ion-app>