I installed CDK Virtual Scroller in my ionic 5.3.3 project:
npm add @angular/cdk
The version is: "@angular/cdk": "^13.0.2"
The scroller viewport wraps a ion-item-group:
<ng-template #showContentBlock>
<cdk-virtual-scroll-viewport
itemSize="56"
minBufferPx="900"
maxBufferPx="1350"
>
<ion-item-group>
<ion-item-sliding *cdkVirtualFor="let test of tests">
<ion-item class="notification-item" lines="none" >
<ion-avatar slot="start">
<img src="./assets/tests/tests6.jpg">
</ion-avatar>
<ion-row class="notification-item-wrapper" (click)="openTestModal(test)">
<!-- <ion-col size="1">
<app-aspect-ratio [ratio]="{w: 1, h: 1}">
<app-image-shell class="notification-image" src="./assets/tests/histology1.jpg" [alt]="'conatct image'"></app-image-shell>
</app-aspect-ratio>
</ion-col> -->
<ion-col class="details-wrapper">
<h2 class="details-name">{{test.investigation}}</h2>
<p class="details-description">{{test.Lab}}</p>
</ion-col>
<ion-col size="2" class="date-wrapper">
<h3 class="notification-date">{{test.SpecimanType}}</h3>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options slide="end">
<ion-item-option color="danger" (click) = "removeTest(test.id)">
<ion-icon name="trash"></ion-icon>
</ion-item-option>
<ion-item-option color="success" (click)="updateStudent(test)">
Edit
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</cdk-virtual-scroll-viewport>
The viewport css properties:
cdk-virtual-scroll-viewport {
height: 100%;
width: 100%;
}
When I build the project I get the following error:
ERROR in node_modules/@angular/cdk/bidi/directionality.d.ts:22:21 - error TS2694: Namespace '"../User Manual/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
22 static ɵfac: i0.ɵɵFactoryDeclaration<Directionality, [{ optional: true; }]>;
This is versions: Ionic:
Ionic CLI : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.9.1 @angular-devkit/build-angular : 0.1001.7 @angular-devkit/schematics : 10.2.3 @angular/cli : 10.2.3 @ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 3.3.2 @capacitor/android : 3.3.2 @capacitor/core : 3.3.2 @capacitor/ios : 3.3.2
Utility:
cordova-res (update available: 0.15.3) : 0.15.2 native-run : 1.5.0
System:
NodeJS : v14.17.0 (/usr/local/bin/node) npm : 6.14.15 OS : macOS Catalina
I have been searching on web but I don't understand the error or how I might go about further debugging it, any help appreciated.
It seems that your angular is version 10: @angular/cli : 10.2.3
and CDK is version 13. Get them in sync - and problems of this kind tend to go away