Ng test Error: NullInjectorError: No provider for IonRouterOutlet!

Ionic Framework Ionic Angular
1

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 custom-page.page.spec.ts 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();
  }

custom-page.page.spec.ts

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CustomPage ],
      imports: [
        FormsModule,
        IonicModule.forRoot(),
        ReactiveFormsModule,
        RouterTestingModule
      ]
    }).compileComponents();

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
1 Like
2

I have the same issue. Did you solve it?

3

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

4

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: ""
          }
        }

(

4 Likes
5

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