[4.0.0-beta.18] IonVirtualScroll errors with `template for virtual item was not provided`

[btsiders]

Bug Report

Ionic version:

[x] 4.x

Current behavior: After upgrading from beta 17 to beta 18, <ion-virtual-scroll> elements error out and do not render. In Chrome debugger, I see:

Error: template for virtual item was not provided
    at VirtualScroll.push../node_modules/@ionic/angular/dist/directives/virtual-scroll/virtual-scroll.js.VirtualScroll.getComponent (virtual-scroll.js:41)
    at VirtualScroll.push../node_modules/@ionic/angular/dist/directives/virtual-scroll/virtual-scroll.js.VirtualScroll.nodeRender (virtual-scroll.js:24)
    at doRender (5cruooxq.entry.js:1)
    at t.writeVS (5cruooxq.entry.js:1)
    at p (ionic.core.js:9)
    at d (ionic.core.js:9)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

Expected behavior: The element should render.

Steps to reproduce: Starting with a blank Ionic 4 app, upgraded to beta 18, add an ion-virtual-scroll area to the Home page. I used the sample code from https://github.com/ionic-team/ionic/blob/master/core/src/components/virtual-scroll/readme.md as a starting point.

Related code:

Change the home.page.html to

<ion-header>
    <ion-toolbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-virtual-scroll [items]="items" approxItemHeight="320px">
        <ion-card *virtualItem="let item; let itemBounds = bounds;">
            <div>
                <img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name">
            </div>
            <ion-card-header>
                <ion-card-title>{{ item.name }}</ion-card-title>
            </ion-card-header>
            <ion-card-content>{{ item.content }}</ion-card-content>
        </ion-card>
    </ion-virtual-scroll>
</ion-content>

and the home.page.ts file to

import { Component } from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    items: any[] = [];
    rotateImg = 0;

    constructor() {
        for (let i = 0; i < 1000; i++) {
            this.items.push({
                name: i + ' - ' + this.images[this.rotateImg],
                imgSrc: this.getImgSrc(),
                avatarSrc: this.getImgSrc(),
                imgHeight: Math.floor(Math.random() * 50 + 150),
                content: this.lorem.substring(0, Math.random() * (this.lorem.length - 100) + 100)
            });

            this.rotateImg++;
            if (this.rotateImg === this.images.length) {
                this.rotateImg = 0;
            }
        }
    }

    // tslint:disable-next-line:max-line-length
    lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

    images = [
        'bandit',
        'batmobile',
        'blues-brothers',
        'bueller',
        'delorean',
        'eleanor',
        'general-lee',
        'ghostbusters',
        'knight-rider',
        'mirth-mobile'
    ];

    getImgSrc() {
        const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
        this.rotateImg++;
        if (this.rotateImg === this.images.length) {
            this.rotateImg = 0;
        }
        return src;
    }

}

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\Bryan\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.18
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.1.3
   @angular/cli                  : 7.1.3
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[manucorporat]

Currently working in a fix! Closing since it's a duplicate of https://github.com/ionic-team/ionic/issues/16725

[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.