I’m new to Ionic 4 and I got the problem that all kinds of popups are not showing, first I thought it were only that I did something wrong in the code of my Modals and Popovers but now I realized that even the Popup for ion-select is not showing. I can post all my code if needed. Would be awesome if someone knows a solution.
Please post a simple code example of for example how you want to show a modal
This is my code i used to create the popover, the code for a modal should be the same, right?
import { Component, OnInit } from '@angular/core';
import { ModalController, NavController, PopoverController } from '@ionic/angular'
import { RateusPageModule } from '../../popover/rateus/rateus.module';
import { RateusPage } from '../../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(ev: any) {
console.log('I got clicked')
const popover = await this.popoverController.create({
component: RateusPage,
event: ev
});
popover.present();
}
}
Any Console Logs ???
No nothing, i dont get an error or so on. It just doesn’t open.
Can you provide a small reproducable repo?
It could be a problem with the routing or how the the module imports were made, if you could share that code as well
here is th
app routing module
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AuthGuard } from './guards/auth.guard'
const routes: Routes = [
{
path: 'home',
loadChildren:'./public/home/home.module#HomePageModule'
},
{
path: 'shop',
loadChildren:'./public/shop/shop.module#ShopPageModule'
},
{
path: 'inbox',
canActivate: [AuthGuard],
loadChildren:'./member/inbox/inbox.module#InboxPageModule'
},
{
path: 'profile',
canActivate: [AuthGuard],
loadChildren:'./member/profile/profile.module#ProfilePageModule'
},
{
path: 'more',
loadChildren:'./public/more/more.module#MorePageModule'
},
{
path: 'login',
loadChildren:'./public/login/login.module#LoginPageModule'
},
{
path: 'register',
loadChildren:'./public/register/register.module#RegisterPageModule'
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
}, {
path: 'webcams',
loadChildren: () => import('./public/webcams/webcams.module').then( m => m.WebcamsPageModule)
},
{
path: 'tipps',
loadChildren: () => import('./public/tipps/tipps.module').then( m => m.TippsPageModule)
},
{
path: 'navi',
loadChildren: () => import('./public/navi/navi.module').then( m => m.NaviPageModule)
},
{
path: 'events',
loadChildren: () => import('./public/events/events.module').then( m => m.EventsPageModule)
},
{
path: 'privacy',
loadChildren: () => import('./public/privacy/privacy.module').then( m => m.PrivacyPageModule)
},
{
path: 'contact',
loadChildren: () => import('./public/contact/contact.module').then( m => m.ContactPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy, PopoverController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { RateusPageModule } from './popover/rateus/rateus.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
FormsModule,
IonicModule.forRoot(),
AppRoutingModule,
IonicStorageModule.forRoot(),
HttpClientModule,
ReactiveFormsModule,
RateusPageModule,
PopoverController
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
I tried to write the code for a new popover on another page with a tutorial so that it’s almost impossible to do something wrong, but it didnt work either. I created a new project for testing that code it there it worked…
maybe you have a problem with z-index and your page overlays the popover
That could be possible, but I didn’t use it. I don’t even know what z-index is good for…
Hard for us to help you without a reproduction
I just realized that I maybe got a backup that maybe works
If so, compare them and check which change could cause this
I think you don’t want to import the lazy loading popover module (RateusPageModule) in the root app module, try only importing in the module of the page requiring the popover
1 Like
Ok I found a working Backup, and after that backup i switched my routing and navigation. I was using tabs and i wanted them to be on every page and not only on the 5 start pages so I added them to my app routing and app components, can that cause the issues?
I changed and tested it, but no difference
You just need to import it wherever the click event is happening. If that’s at the tabs page level, import it there, otherwise if it’s individually on each page you may need to import multiple times, or you could make a global popover service
Also is there any reason some of your pages are loadChildren are not uniform? I doubt it has any bearing necessarily but it’s one of those things that catches the eye
Ok, I only need the Popover one Time on one Page, so it should be enough if i import it on that Page.
No there isnt a reason, i just forgot to change it after i created a new page.
Did I got it right that i only need to import the Page and write this function:
async presentPopover(ev: any) {
console.log('I got clicked')
const popover = await this.popoverController.create({
component: RateusPage,
event: ev
});
popover.present();
}
to present a popover or a modal?
Because i just tried to add a modal into my backup and it worked perfectly fine
I believe that is correct, with lazy loading, you can add the popover module to the specific page, then call the page in the popover creation like you have.
the implementation of popover and modal are very similar in ionic, the only difference seems to be passing the mouse event to determine the popover location