Popover not working in prod version

[sirineberguiga]

Hi i used popover in local it works good but with prod version it is not working

[rapropos]

Please post enough code (as text, not images) for others to be able to reproduce the problem. One common reason things break in production is reliance on the string representation of program internals (property names, and especially class names).

[sirineberguiga]

ok i created a component and i impoted it in a .ts file then i used for an icon

[rapropos]

I explicitly pleaded:

@rapropos

as text, not images

Text is searchable. Text is accessible to people using assistive technology. Text is light on bandwidth. Text is selectable, so it can be copied and pasted. Text is as permanent as these forums.

Images are none of those things. Images should be reserved for information that must be presented visually.

[sirineberguiga]

ok i created a component and i imported it in a .ts file then i used for an icon
a component:
import { Component, OnInit } from ‘@angular/core’;

import { PopoverController } from ‘@ionic/angular’;

import { Router } from ‘@angular/router’;

@Component({

selector: ‘app-popover’,

templateUrl: ‘./popover.page.html’,

styleUrls: [’./popover.page.scss’],

template: `

<ion-button class=“inscri” (click)=“goToregister()” expand=“block”> S’inscrire

<ion-button class=“identifier” (click)=“goTologin()” expand=“block”> Se connecter

`

})

export class PopoverPage implements OnInit {

constructor(private popover: PopoverController,

private router: Router) { }

ngOnInit() {

}

ClosePopover() {

this.popover.dismiss();

}

goToregister() {

this.ClosePopover();

this.router.navigateByUrl('/registration');

}

goTologin() {

this.ClosePopover();

this.router.navigateByUrl('/login');

}

}

I imported it in welcome.ts:
import { PopoverController } from ‘@ionic/angular’;

import { PopoverPage } from ‘…/…/…/components/popover/popover.page’;
async presentPopover(ev: any) {

const popover = await this.popover.create({

  component: PopoverPage,

  event: ev,

  translucent: false

});

return await popover.present();

}
and i used it in welcome.html:

          <ion-icon style="width: 24px; height: 24px; vertical-align: middle;

          display: inline-block;color: #8D8D8D;" slot="start" name="person"></ion-icon><span class="textbtncnx">

            Se connecter </span>

          <ion-icon (click)="presentPopover($event)" style="width: 12px; height: 12px; vertical-align: middle;

            display: inline-block; color: #8D8D8D; margin-left: 5px;" slot="end" name="chevron-down-outline">

          </ion-icon>

        </button>

I realized that in local version it works well:

but prod one i have this result:

[codrone]

Did you figure this out? I have the same issue?

ionic version 7.2.0
@ionic/angular 8.2.7
angular 18

here is my implementation

 <ion-button class="ion-padding-end" id="open">
                <ion-icon name="ellipsis-vertical-circle-sharp" size="large"></ion-icon>
            </ion-button>

 <ion-popover trigger="open" [dismissOnSelect]="true">
            <ng-template>
                <ion-content>
                    <ion-list lines="full">
                        <ion-item button (click)="goToProfile()">
                            <ion-label>Profile</ion-label>
                        </ion-item>
                        <ion-item button (click)="signOut()">
                            <ion-label>Sign Out</ion-label>
                        </ion-item>
                        <ion-item button (click)="signIn()">
                            <ion-label>Signin</ion-label>
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ng-template>
 
    </ion-popover>