bug: angular, cannot easily access router outlet inside of tabs

Bug Report

Ionic version: [x] 4.9.0

Current behavior: When setting [swipeGesture]="false" on the main router outlet, swipe to go back will not be disabled for child outlets (ion-tabs).

Setting swipeBackEnabled: true in the import of IonicModule.forRoot also has no effect on routing based navigation

Expected behavior: –> A way to globally disable swipe to go back, as it is currently broken on iOS.

Steps to reproduce: See above.

Related code: No related code.

Other information: Due to #19293 , we have to disable swipe to go back. Because of the way tabs now work, we no longer define our own ion-router-outlet for each tab, and thus are not able to set [swipeGesture]=“false” for tabs.

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.7 (C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.803.3
   @angular-devkit/schematics    : 8.3.3
   @angular/cli                  : 8.3.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : not available
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.0.1, (and 13 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\Users\xxx\AppData\Local\Android\sdk)
   NodeJS            : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

[wilk-polarny]

As a workaround: One can query the ion-tab using the ViewChild decorator and manually access its underlying outlet:

this.tabElement.outlet.swipeGesture = false

[liamdebeasi]

Thanks, I can confirm that this is a defect in how tabs in Ionic Angular were built. The problem here is <ion-tabs> automatically renders an <ion-router-outlet>, but you need to set swipeGesture="false" on that router outlet, not the root one. As a workaround in Angular, you can query for the router outlet in tabs and set swipeGesture="false" for now.

Note that this is not a problem in React or Vue because those versions of Ionic require you to explicitly pass in an instance of <ion-router-outlet>. This became the recommended approach in Ionic Vue 5.6.10.