Ng test Error: NullInjectorError: No provider for IonRouterOutlet!

I am getting an error in the default “should create” tests for a page when adding “IonRouterOutlet” to the page constructor to use in a modal presentation.

Error Message

Chrome 86.0.4240.193 (Mac OS 11.0.0) CustomPage should create FAILED
Failed: R3InjectorError(DynamicTestModule)[IonRouterOutlet -> IonRouterOutlet]:
NullInjectorError: No provider for IonRouterOutlet!

I have tried importing and adding IonRouterOutlet to the page providers in but that results in another error. Can anyone help explain the dependency mistake I am making? Still trying to understand Angular’s dependency system. Thanks!

Custom Page Constructor

constructor(private authService: AuthService, private formBuilder: FormBuilder, private modalController: ModalController, private customService: CustomService, private routerOutlet: IonRouterOutlet) {}

Modal Presentation (func in custom page)

async presentModal(param) {
    const modal = await this.modalController.create({
      component: AddItemModalComponent,
      componentProps: {
        'param': param
      presentingElement: this.routerOutlet.nativeEl,
      swipeToClose: true
    return await modal.present();

describe('CustomPage', () => {
  let component: CustomPage;
  let fixture: ComponentFixture<CustomPage>;

  beforeEach(async(() => {
      declarations: [ CustomPage ],
      imports: [

    fixture = TestBed.createComponent(CustomPage);
    component = fixture.componentInstance;

  it('should create', () => {
1 Like

I have the same issue. Did you solve it?

Unfortunately, no. I was never able to figure this out.

I encountered this issue, and was able to get the test passing by adding the following to the providers array:

          provide: IonRouterOutlet,
          useValue: {
            //add whatever property of IonRouterOutlet you're using in component class
            nativeEl: ""



Wow, thank you so much! That worked. @lsantaniello check out the comment above for the solution.