bug: no provider for ionRouterOutlet

Bug Report

Ionic version:

[x] 5.x

Current behavior:

I have injected IonRouterOutlet to check canGoBack and getting this error

ERROR NullInjectorError: R3InjectorError(AppModule)[IonRouterOutlet -> IonRouterOutlet -> IonRouterOutlet]: 
  NullInjectorError: No provider for IonRouterOutlet!
    at NullInjector.get (http://localhost/vendor-es2015.js:37118:27)
    at R3Injector.get (http://localhost/vendor-es2015.js:51065:33)
    at R3Injector.get (http://localhost/vendor-es2015.js:51065:33)
    at R3Injector.get (http://localhost/vendor-es2015.js:51065:33)
    at NgModuleRef$1.get (http://localhost/vendor-es2015.js:68623:33)
    at Object.get (http://localhost/vendor-es2015.js:66351:35)
    at getOrCreateInjectable (http://localhost/vendor-es2015.js:40933:39)
    at ɵɵdirectiveInject (http://localhost/vendor-es2015.js:54999:12)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (ng:///AppComponent/ɵfac.js:7:56)
    at getNodeInjectable (http://localhost/vendor-es2015.js:41078:44)

So i have added in app.module.ts of providers array but now getting this error

vendor-es2015.js:41302 ERROR Error: Cannot instantiate cyclic dependency! IonRouterOutlet
    at throwCyclicDependencyError (vendor-es2015.js:43122)
    at R3Injector.hydrate (vendor-es2015.js:51299)
    at R3Injector.get (vendor-es2015.js:51053)
    at NgModuleRef$1.get (vendor-es2015.js:68623)
    at Object.get (vendor-es2015.js:66351)
    at getOrCreateInjectable (vendor-es2015.js:40933)
    at Module.ɵɵdirectiveInject (vendor-es2015.js:54999)
    at Object.IonRouterOutlet_Factory [as factory] (vendor-es2015.js:104932)
    at R3Injector.hydrate (vendor-es2015.js:51303)
    at R3Injector.get (vendor-es2015.js:51053)

Expected behavior:

It should not through error

Steps to reproduce:

1. go to app.component.ts and see in platform.isReady
2. go to app.module.ts and see providers array

Related code:

Repository: https://github.com/indraraj26/ionic5-starter-tabs-sidemenu/tree/handle-back-button Branch: handle-back-button

this.platform.backButton.subscribeWithPriority(-1, async (_) => {
				console.log(
					this._ionRouterOutlet.component,
				);
				if (!this._ionRouterOutlet.canGoBack()) {
					await this._app.minimize();
				}
			});

Other information:

Ionic info:

ionic info

Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\indra26\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.901.4
   @angular-devkit/schematics    : 9.1.4
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

   cordova-res : 0.8.0 (update available: 0.15.1)
   native-run  : 0.2.9 (update available: 1.0.0)

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[rtbm]

You can define a property in the app.component.ts like: @ViewChild(IonRouterOutlet, { static : true }) routerOutlet: IonRouterOutlet;

and then use it like this.routerOutlet.canGoBack().

Unfortunately querySelector is not a proper answer and got lost me for a while. Hopes that it’ll be helpfull for anyone who gets here like me 😃

[liamdebeasi]

If you want to use the dependency injection, you need to inject it into a component that exists inside of ion-router-outlet. Otherwise, you can use a querySelector to select the component yourself.