# NullInjectorError: No provider for IonRouterOutlet!

**URL:** <https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058>\
**Category:** Ionic Framework\
**Created:** [July 1, 2020, 10:07am UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058 "2020-07-01T10:07:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dev-huesca](https://avatars.discourse-cdn.com/v4/letter/d/d07c76/32.png) [@dev-huesca](https://forum.ionicframework.com/u/dev-huesca)\
**Post date:** [July 1, 2020, 10:07am UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058/1 "2020-07-01T10:07:44Z")

</div>

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 😭

 ![Captura](https://global.discourse-cdn.com/ionicframework/original/3X/2/f/2fbad6a836372e8a550549aa7dc30bd50ace2b72.png)

“_Discover Page_” is a tab of my “_Index Page_”

> discover.module.ts

```auto
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

```auto
...
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

---

<div class="post-metadata">

**Author:** ![dev-huesca](https://avatars.discourse-cdn.com/v4/letter/d/d07c76/32.png) [@dev-huesca](https://forum.ionicframework.com/u/dev-huesca)\
**Post date:** [July 2, 2020, 10:09am UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058/2 "2020-07-02T10:09:14Z")

</div>

anyone, please?

This is breaking my project ☹

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [July 2, 2020, 1:01pm UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058/3 "2020-07-02T13:01:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 2, 2020, 1:48pm UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058/4 "2020-07-02T13:48:08Z")

</div>

> [@dev-huesca](#):
>
> ` IonicModule.forRoot(),`

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.

---

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [February 20, 2021, 1:39pm UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058/5 "2021-02-20T13:39:54Z")

</div>

I have the same issue. How you solved?

---

<div class="post-metadata">

**Author:** ![Tms](https://avatars.discourse-cdn.com/v4/letter/t/5f9b8f/32.png) [@Tms](https://forum.ionicframework.com/u/Tms)\
**Post date:** [October 7, 2021, 9:02am UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058/6 "2021-10-07T09:02:40Z")

</div>

Found a solution:

In your constructor mark the dependency as optional

```auto
    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

```auto
    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();
    }

```

---

<div class="post-metadata">

**Author:** ![dlabuschagne](https://avatars.discourse-cdn.com/v4/letter/d/7ea924/32.png) [@dlabuschagne](https://forum.ionicframework.com/u/dlabuschagne)\
**Post date:** [January 1, 2022, 9:32am UTC](https://forum.ionicframework.com/t/nullinjectorerror-no-provider-for-ionrouteroutlet/192058/7 "2022-01-01T09:32:23Z")

</div>

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.