Angular virtual scrolling

Question

We are using Angular 10.0.9. and I just tried to add virtual scrolling to a page and followed the official documentation:

1. Import ScrollingModule in app.module.ts

2. Add the cdk-virtual-scroll-viewport with an itemSize and add a *cdkVirtualFor to iterate the array

3. The browser logs the following exception (tried with different browsers):

Do you guys have an idea what I am missing? I searched a lot without any success, each example follows the above steps.

Update package.json

"dependencies": {
    "@angular/animations": "~10.0.6",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.0.6",
    "@angular/compiler": "~10.0.6",
    "@angular/core": "~10.0.6",
    "@angular/forms": "~10.0.6",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.0.6",
    "@angular/platform-browser-dynamic": "~10.0.6",
    "@angular/platform-server": "~10.0.6",
    "@angular/router": "~10.0.6",
    "@auth0/angular-jwt": "^5.0.1",
    "@microsoft/applicationinsights-web": "~2.4.4",
    "@ngrx/data": "^10.0.0",
    "@ngrx/effects": "^10.0.0",
    "@ngrx/entity": "^10.0.0",
    "@ngrx/router-store": "^10.0.0",
    "@ngrx/schematics": "^10.0.0",
    "@ngrx/store": "^10.0.0",
    "@ngrx/store-devtools": "^10.0.0",
    "@nguniversal/express-engine": "^10.0.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "core-js": "^3.6.5",
    "express": "^4.15.2",
    "flatpickr": "^4.6.6",
    "jquery": "^3.5.1",
    "js-sha256": "^0.9.0",
    "msal": "^1.3.4",
    "ngx-cookie-service": "^10.0.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  }