NullInjectorError: No provider for IonRouterOutlet!

Hi guys, I really need your help. I’m about to rage quit!

I’m trying to create a simple modal component but keep getting this error and I don’t know what to do :sob:

Discover Page” is a tab of my “Index Page

discover.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { IonicModule } from "@ionic/angular";
import { DiscoverPageRoutingModule } from "./discover-routing.module";
import { DiscoverPage } from "./discover.page";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule.forRoot(),
    DiscoverPageRoutingModule,
  ],
  declarations: [DiscoverPage],
})
export class DiscoverPageModule {}

discover.page.ts

...
import { StoreProfileModalComponent } from "../../components/store-profile-modal/store-profile-modal.component";
import { ModalController, IonRouterOutlet } from "@ionic/angular";
...
constructor(
    private routerOutlet: IonRouterOutlet,
    private modalController: ModalController
  ) {}

async openStoreProfileModal(storeID: number) {
    const storeProfileModal = await this.modalController.create({
      component: StoreProfileModalComponent,
      presentingElement: this.routerOutlet.nativeEl,
      swipeToClose: true,
      componentProps: {
        storeID: storeID,
      },
    });
    return await storeProfileModal.present();
  }

Please help

anyone, please?

This is breaking my project :frowning:

Are you trying to call this from a Service and not from a Page?

you shouldn’t need to do the .forRoot part here. Since it’s a lazy loaded module, it’s not the root. just using IonicModule is enough alone.

Testing it out locally, that should be all you need to change. But we’ll see after you make the edit.