I am working on angular cli project. I am getting errors when using angular material component.

Uncaught Error: Type MatAutocomplete does not have 'ɵmod' property.

I installed angular cli multiple versions and the following version seems to be compatible. Otherwise it again gives error.

angular-cli version - Angular CLI: 11.2.14 Node: 14.18.1 OS: win32 x64

angular material version - @angular/material@10.2.7

Uncaught Error: Type MatAutocomplete does not have 'ɵmod' property.
    at getNgModuleDef (core.js:1141:1)
    at recurse (core.js:25270:1)
    at recurse (core.js:25281:1)
    at registerNgModuleType (core.js:25266:1)
    at new NgModuleFactory$1 (core.js:25380:1)
    at compileNgModuleFactory__POST_R3__ (core.js:28993:1)
    at PlatformRef.bootstrapModule (core.js:29239:1)
    at Module.zUnb (main.ts:19:26)
    at __webpack_require__ (bootstrap:84:1)
    at Object.0 (main.js:24:18)

More information I have my app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    // CommonModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    AppAsideModule,
    AppBreadcrumbModule.forRoot(),
    RouterModule,
    ToasterModule,
    ServiceModule,
    MatDatepickerModule,
    MatTableDataSource,
    MatButtonModule,
    MatFormFieldModule,
    MatCardModule,
    MatInputModule,
    MatAutocompleteModule,
    MatAutocomplete,
    MatNativeDateModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatGridListModule,
    MatPaginatorModule,
    MatDialogModule,
    MatListModule,
    MatIconModule,
    MatChipsModule,
    MatTooltipModule,
   
   
  ],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    {provide: ErrorHandler, useClass: GlobalErrorHandler},
    IconSetService,
    ToasterService,
 
  ],
  
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [ AppComponent ]
})
export class AppModule { }