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  lines="none" >
              <ion-avatar slot="start">
                <img src="./assets/tests/tests6.jpg">
              </ion-avatar>
              <ion-row  (click)="openTestModal(test)">
    
                <!-- <ion-col size="1">
                  <app-aspect-ratio [ratio]="{w: 1, h: 1}">
                    <app-image-shell  src="./assets/tests/histology1.jpg" [alt]="'conatct image'"></app-image-shell>
                  </app-aspect-ratio> 
                </ion-col> -->
                  <ion-col >
                    <h2 >{{test.investigation}}</h2>
                    <p >{{test.Lab}}</p>
                  </ion-col>
                  <ion-col size="2" >
                    <h3 >{{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.

CodePudding user response：

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