NullInjectorError: No provider for IonRouterOutlet!

Ionic Framework
1

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:

Captura
Captura970×131 6.82 KB

“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

2

anyone, please?

This is breaking my project :frowning:

3

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

4

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.

5

I have the same issue. How you solved?

6

Found a solution:

In your constructor mark the dependency as optional

    constructor(
        ...
        private readonly modalController: ModalController,
        @Optional() private readonly routerOutlet?: IonRouterOutlet,
    ) {
    }

and later on in your code fallback to a default if could not be injected

    public async changeViewSettings() {
        const modal = await this.modalController.create({
            component: ModalConponent,
            swipeToClose: true,
            presentingElement: this.routerOutlet == null ? await this.modalController.getTop() : this.routerOutlet.nativeEl,
        });
        await modal.present();
    }
1 Like
7

Had same problem. My problem seems to come from the fact that the page I am trying to open as a modal also opens it’s own modals. I removed the routerOutlet imports from the page I am trying to open and then it worked.