Angular: Material ui cdk-virtual-scroll-viewport not working as expected

user_4230093 0
Viewed 1030

Followed the official documentation here to implement a virtual viewport but getting the following error message in the html component:

Error message

'cdk-virtual-scroll-viewport' is not a known element:
1. If 'cdk-virtual-scroll-viewport' is an Angular component, then verify that it is part of this module.
2. If 'cdk-virtual-scroll-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)

The code:

module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollDispatcher } from '@angular/cdk/scrolling';
import { CdkScrollableModule } from '@angular/cdk/scrolling';
import { SearchComponent } from './search.component';

@NgModule({
  declarations: [
    SearchComponent
  ],
  imports: [
    CommonModule,
    ScrollingModule,
    CdkScrollableModule,
    ScrollDispatcher
  ],
  bootstrap: [SearchComponent]
})
export class SearchModule { }

html

<cdk-virtual-scroll-viewport itemSize="1000" class="list-container lg">
  <div *cdkVirtualFor="let number of numbers" class="number">{{number}}</div>
</cdk-virtual-scroll-viewport>

component

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

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {

  numbers : number[] = [];

  constructor() {
     for (let i = 0; i<1000; i++) {
      this.numbers.push(i);
     }
   }

  ngOnInit(): void {
  }
}

configuration

Angular CLI: 13.2.4
Node: 16.13.1
Package Manager: npm 8.3.1
OS: win32 x64

Angular: 13.2.3
... animations, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.4
@angular-devkit/build-angular   13.2.4
@angular-devkit/core            13.2.4
@angular-devkit/schematics      13.2.4
@angular/cdk                    13.2.4
@angular/cli                    13.2.4
@angular/flex-layout            13.0.0-beta.38
@schematics/angular             13.2.4
rxjs                            7.5.4
typescript                      4.5.5

Can someone point me to the right direction ?

material-ui angular
1 Answers

It is an import and export issue. In my app, I use the lazy loading feature of angular i.e. creating pages/components in its own module. I have one shared module called: core.module.ts, I was missing ScrollingModule in export and also missing schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

e.g.

Component A in Module A, Component B in Module B, Component C in Module C, and Share module: core.module.ts

 import { ScrollingModule } from '@angular/cdk/scrolling';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  imports: [
     ScrollingModule,
  ],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ], // Must add this one.

   exports: [
        ScrollingModule,
   ]

});

export class CoreModule { }

Component A with components files: component-a.html, component-a.ts, component-a.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CoreModule } from 'src/app/core/core.module';

@NgModule({
  declarations: [

  ],
  imports: [
    CommonModule,
    CoreModule,
  ],

})
export class ComponentAModule { }

I hope, it makes sense, Let me know if that solves the issue.

user_69183030
Related