Can't bind to 'items' since it isn't a known property of 'virtual-scroller'

I am having an issue with getting virtual scroll implemented into my ionic 4 + Angular project.

Previously, I have used ionic's implementation of virtual scroll (ion-virtual-scroll) which was working great initially but ran into a arguably big caveat of it not support ionic's grid view which is something that is required for my app. (Ionic have acknowledged this under their repo here under 'Feature requests': https://github.com/ionic-team/ionic/issues/16632)

In the meantime I have resorted to using ngx-virtual-scroller (https://github.com/rintoj/ngx-virtual-scroller) as it provides multi-column support

However, I am having trouble with using within my project.

I've installed it through npm (npm install ngx-virtual-scroller --save) and imported the VirtualScrollerMoudle within my app.module

app.module.ts

import { VirtualScrollerModule } from 'ngx-virtual-scroller'

imports: [
    ...
    VirtualScrollerModule
],

I've wrapped the virtual-scroller tag around my elements within the view of my component

product-card-view.component.html

<virtual-scroller #scroll [items]="productsArray">
  <div *ngIf="columnViewActive; else listView">
    <ion-row>
      <ion-col size="6" *ngFor="let p of scroll.viewPortItems">
        <ion-card>
          <ion-card-header>
            <a class="productTitleColumn" title="{{ p.title }}" href="{{ p.link }}">{{ p.title }}</a>
          </ion-card-header>
          <ion-card-content>
            ..... ETC .....
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>
</virtual-scroller>

But I am receiving this error

Error in console

core.js:9110 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'items' since it isn't a known property of 'virtual-scroller'. 1. If 'virtual-scroller' is an Angular component and it has 'items' input, then verify that it is part of this module. 2. If 'virtual-scroller' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

After scouring for a solution I ran into someone else who faced a similar issue but with Ionic 3 (https://github.com/rintoj/ngx-virtual-scroller/issues/85) and their solution was to import the VirtualScrollMoudle into the child module of where it was being used instead of the global app module and indicating it might have to be something to do with using lazy-loading for components.

Unfortunately, I attempted that to no avail. I've tried importing the VirtualScrollMoudle to app.module.ts only, the parent page module of the component which is using virtual-scoller only and both at the same time but ran into the same issue.

home.module.ts

import { VirtualScrollerModule } from 'ngx-virtual-scroller'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    FontAwesomeModule,
    ProductSharedModule,
    HeaderFooterSharedModule,
    HideHeaderSharedModule,
    VirtualScrollerModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

I've also made sure that the import statements are at the bottom as I have seen that has managed to catch out quite a lot of people (Including myself in the past)

Is there any solutions or am I missing something quite obvious?

Versions:

Ionic 4 (5.4.4)

Angular: 8.1.3

UPDATE

With many thanks to @Reactgular I have got the problem resolved!

As my product-card-view.component was inside a shared module, I needed to import the virtual scroll module within the shared module and not seperately within either app.module.ts or the parent page module

product-shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { VirtualScrollerModule } from 'ngx-virtual-scroller';

// Product card component
import { ProductCardViewComponent } from '../../components/products/product-card-view/product-card-view.component';

@NgModule({
  declarations: [ProductCardViewComponent],
  imports: [CommonModule, IonicModule, FontAwesomeModule, VirtualScrollerModule],
  exports: [ProductCardViewComponent]
})
export class ProductSharedModule { }

I'll leave this answer up in hopes that it can help anyone in the future who faces a similar issue