Ionic v4: Virtual Scroll does not work inside of an ion-tab

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.6
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.11.2
   npm    : 6.0.1
   OS     : macOS High Sierra

Describe the Bug ion-virtual-scroll does not load any elements when used inside an ion-tab.

Steps to Reproduce Steps to reproduce the behavior:

1. Generate a new Ionic v4 project with the tabs template.
2. Add a ion-virtual-scroll element following the Ionic 4 example inside one of the tab page components. See that this virtual scroll doesn’t load any children and throws no errors.
3. Remove the ion-tab that wraps the ion-router-outlet
4. See that the virtual scroll items now load.

Related Code This doesn’t work:

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

This does:

<ion-tabs>
	<ion-router-outlet name="home"></ion-router-outlet>
</ion-tabs>

Expected Behavior ion-virtual-scroll should work inside of a ion-tab

Additional Context After poking around in https://github.com/ionic-team/ionic/blob/51c2aa69a29dec1f2bb76c1b7387716b7872fd4b/core/src/components/virtual-scroll/virtual-scroll.tsx#L366. this.scrollEl.offsetHeight logs out at 0 when wrapped in the ion-tab, but returns the correct height when not. For some reason even though the ion-scroll element exists, it has 0 height when inside the ion-tab. Wrapping the onResize() method and the scrollEl.componentOnReady() callback in a setTimeout(() => {}) fixes the issue, but seems like a hacky solution.

[faraazc]

@manucorporat @mlynch @adamdbradley Please consider virtual-scroll + infinite scroll bugs seriously as they basic necessary feature required for the maximum data-driven Apps. Ionic 2 and 3 implementations did not justify the needs, as a result, many devs moved to native frameworks after waiting for a long time. As a community, we tried to solve this problem but with less expertise, it was hard to achieve. It will be great if V4 does not appoint and Ionic would consider VS + infinite scroll seriously and high prioritize them. This request is not just from me but from 25 other fellow devs who love Ionic and love to use Ionic for every idea/business/implementation.

Last but not least Thanks for providing Ionic which is the best gift web community has received so far.

Thanks

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.